2

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?

Improve this question

3 Answers 3

Reset to default
6

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, e.g. 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:

e.g. 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:

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);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Excellent answer. For clarification and to ensure this format works even if other types of controls are added to the page, should you add "[input type='checkbox']" to your selector?
@Stan: I would rework most of the selectors myself, so that everything correctly scoped and group. I am updating the answer at the moment to show other options.
The target element has ID attribute! I would use it.
@Rockstar: been there, done that... please check for revisions to answer :)
@rockstar: The last example was correct for multiples, but I had the wrong JSFiddle linked. Link now fixed.
|
0

The easiest way to do this is to check the length

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

Comments

0

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>

Improve this answer

1 Comment

Errrm... reducing code would also mean putting (total === checked) inside a single prop statement and not duplicate the line :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.