javascript - 只有一个复选框被 div 勾选了可能性复选框

Question

我在网站上有几个复选框。此复选框也可以被 div 选中，但一次只能选中一个复选框。那就是问题所在。当我想按 div 单击 checbox 时 - 它有效。

当我一次只想检查一个复选框时 - 它有效。但是当我同时想要这两个功能时 - 它不会。

所以这是代码(例如):

<div class="sth">
 <input type="checkbox" class="myCheck"><label>blabla</label>
</div>
<div class="sth">
 <input type="checkbox" class="myCheck"><label>blabla</label>
</div>
<div class="sth">
 <input type="checkbox" class="myCheck"><label>blabla</label>
</div>

和 jQuery:

$("div.sth").on("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    var checkbox = $(this).find("input[type='checkbox']");

    if( !checkbox.prop("checked") ){
        checkbox.prop("checked",true);
    } else {
        checkbox.prop("checked",false);
    }
});

$('input:checkbox').on('change', function() {
    $('input:checkbox').not(this).prop('checked', false);  
});

Answer 1

Updated fiddle .

您应该添加以下行:

$('input:checkbox').not(this).prop('checked', false); 

在您的"div.sth" 点击事件中先取消选中其他复选框，然后选择与点击的 div 相关的复选框。

希望这对您有所帮助。