使用jQuery选择和取消选择复选框

Question

See the following code:

  $(document).ready(function() { $('.checkbox-group .parents-checkbox .panel-title input').click(function () { $(this).closest('.checkbox-group').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default item-box-roll checkbox-group"> <div class="panel-heading parents-checkbox"> <h3 class="panel-title"> <input type="checkbox" name="rolls[]" id="selecctall" value="2" checked="">&nbsp;&nbsp;Items </h3> </div> <div class="panel-body child-checkbox"> <input type="checkbox" class="checkbox1" name="rolls[]" value="20" checked="">&nbsp;&nbsp;Items management<br> <input type="checkbox" class="checkbox1" name="rolls[]" value="21" checked="">&nbsp;&nbsp;Add item<br> <input type="checkbox" class="checkbox1" name="rolls[]" value="22" checked="">&nbsp;&nbsp;Edit items<br> </div> </div> 

When i click on first checkbox therefore select all checkbox in child-checkbox div. I want to if selected each of checkbox in child-checkbox div then check first checkbox! How can I change the code?

Answer 1

You need to listen to the child checkboxes and set the parent checkbox based on whether they have no unchecked boxes .

JSFiddle: http://jsfiddle.net/TrueBlueAussie/annvy1ed/1/

$('.child-checkbox :checkbox').change(function(){
    $('.checkbox-group .parents-checkbox .panel-title :checkbox').prop('checked', $('.child-checkbox :checkbox').not(':checked').length == 0);
});

The selectors can all be simplified, but this will answer your basic question.

You can shorten it to:

$('.checkbox-group .parents-checkbox .panel-title :checkbox').prop('checked', !$('.child-checkbox :checkbox:not(:checked)').length);

http://jsfiddle.net/TrueBlueAussie/annvy1ed/3/

You can shorten it a lot more, eg if you can make use of your ID selector, but your code indicates you may have multiple groups of checkboxes on the page.

If there are multiple groups you will need to also use closest again in the new code:

eg http://jsfiddle.net/TrueBlueAussie/annvy1ed/9/

$('.child-checkbox :checkbox').change(function(){
    var $group = $(this).closest('.checkbox-group');
    $group.find('.parents-checkbox .panel-title :checkbox').prop('checked', !$group.find('.child-checkbox :checkbox:not(:checked)').length);
});

Notes:

• You should use the change event in preference to click for checkboxes.
• You can use the :checkbox pseudo selector for checkboxes: http://jsfiddle.net/TrueBlueAussie/annvy1ed/2/

Update "any" child checked:

If you want to tick the parent if any of the child boxes is checked, reverse the logic:

http://jsfiddle.net/TrueBlueAussie/annvy1ed/5/

$('.child-checkbox input').change(function(){
    $('.checkbox-group .parents-checkbox .panel-title input').prop('checked', $('.child-checkbox input:checked').length);
});

or, to support multiple checkbox groups:

http://jsfiddle.net/TrueBlueAussie/annvy1ed/8/

$('.child-checkbox :checkbox').change(function(){
    var $group = $(this).closest('.checkbox-group');
    $group.find('.parents-checkbox .panel-title :checkbox').prop('checked', $group.find('.child-checkbox :checkbox:checked').length);
});

Answer 2

The easiest way to do this is to check the length

$(".checkbox1").change(function(){
    if ($('.checkbox1:checked').length == $('.checkbox1').length) {
       //check the parent checkbox
    }
};

Answer 3

Tip: You should use data attributes on your elements to reduce the amount of code and complexity of your JavaScript...

 $(document).ready(function() { $('.checkbox-group .parents-checkbox .panel-title input').click(function() { $(this).closest('.checkbox-group').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label'); }); $('.checkbox-group .child-checkbox input').click(function() { var total = $('.checkbox-group .child-checkbox input').length; var checked = $('.checkbox-group .child-checkbox input:checked').length; $('.checkbox-group .parents-checkbox .panel-title input').prop('checked', (total === checked)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default item-box-roll checkbox-group"> <div class="panel-heading parents-checkbox"> <h3 class="panel-title"> <input type="checkbox" name="rolls[]" id="selecctall" value="2" checked="">&nbsp;&nbsp;Items </h3> </div> <div class="panel-body child-checkbox"> <input type="checkbox" class="checkbox1" name="rolls[]" value="20" checked="">&nbsp;&nbsp;Items management <br> <input type="checkbox" class="checkbox1" name="rolls[]" value="21" checked="">&nbsp;&nbsp;Add item <br> <input type="checkbox" class="checkbox1" name="rolls[]" value="22" checked="">&nbsp;&nbsp;Edit items <br> </div> </div>