Question

我有三个选项，如果您点击某个选项，则会在其上显示一个复选标记，表示所选的选项。我有一套限制。截至目前，需要再次点击图像/当前复选标记输入以将其删除，而不是简单地单击其他选项并将其删除。

我试图设置一个复制我实际拥有的片段，但是由于某种原因没有显示复选标记。无论如何，我试图将我从另一篇文章中看到的解决方案与$('').not(this).prop('checked', false);。

结合起来

我不知道如何将其添加到我的代码中以使其工作。我试过了：

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

和

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

有人知道如何在点击另一个复选标记输入选项时切换标记输入吗？

这是与之关联的代码块。

$('.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>

Answer 1

如果您尝试只选择一个复选框，则需要添加一个名称（如果您想使用无线电，则需要jQuery for checkbox），这在每个输入字段中都是相同的：

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

如果您使用此代码只选中了一个复选框，则删除此代码：

$('.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);

并添加以下内容：

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

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

基本上你说的是你点击的任何一个，其余的输入都会被检查错误。

使用限制

1 个答案: