Question

我有一些复选框，其中一个是全选，其他子复选框在那里

这是我的HTML

<label> Select All </label>
<input type="checkbox" name="all" checked="" id="parent">
<label> Child 1 </label>
<input type="checkbox" name="child" checked="" id="child">
<label> Child 2 </label>
<input type="checkbox" name="child" checked="" id="child">

这是我检查和取消选中的JQuery脚本

 $('#parent').on('change', function () {
    $('.child').prop('checked', $(this).prop('checked'));        
}); 
$('.child').on('change', function () {
$('#parent').prop('checked', false);
 $('.child').not(this).prop('checked', false);
$(this).prop('checked',true);   
});

select all工作正常，但是（'。child'）更改父项未选中且子项仍未选中，我无法取消选中

我需要一种方法，一旦任何孩子被检查，父母应该与所有其他子元素一起取消选中，但我也应该能够选择多个孩子

Answer 1

您可以使用disting false代替let disting v = match v with | bool -> (*expression2*) | int -> (*expression1*) | _ -> (*expression3*)。同时将click更改为change。

HTML：

id="child"

JS：

class="child"

＆＃13;

<label> Select All </label>
<input type="checkbox" name="all" checked="" id="parent">
<label> Child 1 </label>
<input type="checkbox" name="child" checked="" class="child">
<label> Child 2 </label>
<input type="checkbox" name="child" checked="" class="child">

＆＃13;

 $('#parent').on('click', function () {
    $('.child').prop('checked', $(this).prop('checked'));        
}); 
$('.child').on('click', function () { 
     console.log($('.child').is(':checked').length);

    if ($('.child:checked').length == 2) {
        $('#parent').prop('checked', true);
    } else {
        $('#parent').prop('checked', false);
    }

});

＆＃13;

Answer 2

我认为当您再次取消选中子复选框时，第一个功能是激活并使父选择。所以你可以试试这个：

$('#parent').on('change', function () {
    if($(this).is(":checked")){
        $('.child').prop('checked', $(this).prop('checked'));  
    }else{
        $(this).prop('checked', false); 
    }
});

JQuery检查和取消选中复选框验证

2 个答案: