Adding/removing checkmark to different inputs with

问题:

I have three options and if you click on an option a checkmark shows over it, representing the option as selected. I have a limit of 1 set. As of now, the image/current checkmark input needs to be clicked again to remove it, rather than simply being able to click on another option and removing it.

I tried to setup a snippet that replicates what I actually have, but the checkmark isn't showing for some reason. Regardless, I am attempting to incorporate a solution I saw from another post with this: $('').not(this).prop('checked', false);.

I am not sure how to add it to my code to get it to work though. I have tried:

$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked).not(this).prop('checked', false);

and

$(this).parents('.product-wrap:first').find('.checkmark-img').not(this).prop('checked', false).fadeBoolToggle(this.checked);

Does anyone know how I can get the checkmark inputs to switch when clicking another checkmark input option?

This is the block of code that it is associated with.

$('.calendar-check').on('change', function () {
        //    $('').not(this).prop('checked', false);
        if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
            $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);

 //For checkmark
    jQuery.fn.fadeBoolToggle = function (bool) {
        return bool ? this.fadeIn(400) : this.fadeOut(400);
    }
$('.calendar-check').on('change', function () {
        //    $('input.example').not(this).prop('checked', false);
        if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
            $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
        }
});

.product-check, .calendar-check {
  display: none;
}
.total-center {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
.product-wrap {
    width: 100%;
    position: relative;
    display: block;
}
.checkmark-img {
    display: none;
    width: 40%;
    height: auto;
    z-index: 1;
    cursor: pointer;
}
.package-check-toggle {
    position: relative;
    height: 100%;
    width: 100%;
    display: block;
}
#calendar-box-wrap, #tp-package-wrap {
    margin: 50px 0;
}
.calendar-box, .tp-package {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin: 0 4%;
    position: relative;
}
.option-input {
    border: 1px solid #CDCDCD;
    padding: 10px;
    color: #303030;
    font-size: 1.2em;
}
/*- Calendar -*/
.calendar-selection-img {
    width: 70%;
    height: auto;
    cursor: pointer;
    margin: 0 auto;
    display: block;
}
/*- Calendar Preview Section -*/
#pg-preview-input-section, #pg-preview-img-section {
    display: inline-block;
    vertical-align: top;
}
#pg-preview-input-section {
    width: 45%;
}
#pg-preview-img-section {
    width: 55%;
}
#calender-preview-choice {
    margin-top: 50px;
    font-weight: bold;
}
.pg-preview-img {
    width: 35%;
    height: auto;
    margin-left: 15%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
                            <div class="product-wrap">
                                <label for="cal-2year" class="package-check-toggle">
                                    <h4 class="calendar-box-title">A</h4>
                                    <img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg" alt="A" class="calendar-selection-img">
                                    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
                                </label>
                                <input type="checkbox" class="calendar-check">
                            </div>
                        </div><div class="calendar-box">
                            <div class="product-wrap">
                                <label for="cal-whiteboard" class="package-check-toggle">
                                    <h4 class="calendar-box-title">B</h4>
                                    <img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg" alt="B" class="calendar-selection-img">
                                    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
                                </label>
                                <input type="checkbox" class="calendar-check">
                            </div>
                        </div><div class="calendar-box">
                            <div class="product-wrap">
                                <label for="cal-glance" class="package-check-toggle">
                                    <h4 class="calendar-box-title">C</h4>
                                    <img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg" alt="C" class="calendar-selection-img">
                                    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
                                </label>
                                <input type="checkbox" class="calendar-check">
                            </div>
                        </div>

回答1:

If you are trying to have only one checkbox selected you need to add a name (if you want to use radio this works else you need jQuery for checkbox ) that is the same in each input field:

<div>
   <input name="checkMark" type="checkbox" />
</div>
<div>
   <input name="checkMark" type="checkbox" />
</div>
<div>
   <input name="checkMark" type="checkbox" />
</div>

If you are using this code to have only one checkbox checked, then delete this code:

$('.calendar-check').on('change', function () {
        //    $('').not(this).prop('checked', false);
        if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
            $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);

and add this one:

$('input.calendar-check').on('click', function(){
    $('input.calendar-check').not(this).attr('checked', false);
})

https://jsfiddle.net/e854ao30/2/

Basically you're saying whichever one you click, the rest of the inputs will be checked false.