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

Question

I have some checkboxes in which one is select all and other child checkboxes are there

this is my 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">

This is my JQuery Script of checking and unchecking

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

The select all works fine but the ('.child') on change the parent is unchecked and the child remains checked, i cant uncheck

I need a way to for once any child is checked the parent should be unchecked along with all other child elements but also I should be able to select multiple children

Answer 1

You can use click instead of change . Also change the id="child" to class="child" .

HTML:

<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">

JS:

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

});

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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"> 

Answer 2

I think when you are de-selecting the child checkbox again the first function is excuting and making the parent as selected. so you can try this:

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