Toggle check/uncheck for multiple checkbox lists using jQuery

Question

I have two problems with checking and unchecking (select and deselect all) a checkboxlist:

The parent checkbox does not check/uncheck.
I need to only select the children.

Example:

$(document).ready(function(){
    $('.all').toggle(
        function() {
            $('.check').find('input[type=checkbox]').attr('checked', true);
        },
        function() {
            $('.check').find('input[type=checkbox]').attr('checked', false);
        });
});

Right now, I have the event on a class, and since the class is shared by both checkbox lists, they all toggle.

check my answer to similar question here stackoverflow.com/questions/9246150/… — SpYk3HH
– SpYk3HH, Commented Feb 22, 2012 at 0:05

shaunsantacruz · Accepted Answer · 2013-08-08 18:52:19Z

6

Demo

$(document).ready(function(){ 
    $('.all').click(function() {
        var $checkboxes = $(this).parent().find('input[type=checkbox]');
        $checkboxes.prop('checked', $(this).is(':checked'));
    });     
});

HTML

<div class="check">
      <input type="checkbox" class="all" /> Check/Uncheck all<br />
      <input type="checkbox" /> 1<br />
      <input type="checkbox" /> 2<br />
      <input type="checkbox" /> 3<br />
      <input type="checkbox" /> 4<br />
      <input type="checkbox" /> 5<br />
      <input type="checkbox" /> 6<br />
      <input type="checkbox" /> 7
</div>
...

edited Aug 8, 2013 at 18:52

answered Feb 22, 2012 at 0:56

shaunsantacruz

8,9503 gold badges22 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dominicbri7 Over a year ago

this definitely works but you do NOT need the "? true : false" part, since "$(this).is(':checked')" already returns true or false. it's like saying "if(true){ true } else { false}"

guidod Over a year ago

Actually, it needs a !$(this).is('checked'), otherwise it doesn't do anything.

Nerdroid · Accepted Answer · 2014-12-31 13:10:36Z

Nice post above. Yet another way using each function, though its not using the children only.

jQuery('.check-all').click(function() {
      jQuery('.checked-rec').each(function() {
        $(this).attr('checked', $('.check-all').is(':checked'));
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<thead>
  <tr>
    <th>
      <input type="checkbox" class="check-all">
    </th>
  </tr>
</thead>

<tbody>

  <tr class="odd gradeX">
    <td>
      <input type="checkbox" class="checked-rec">
    </td>
  </tr>

  <tr class="odd gradeX">
    <td>
      <input type="checkbox" class="checked-rec">
    </td>
  </tr>

  <tr class="odd gradeX">
    <td>
      <input type="checkbox" class="checked-rec">
    </td>
  </tr>

  <tr class="odd gradeX">
    <td>
      <input type="checkbox" class="checked-rec">
    </td>
  </tr>

</tbody>

Collectives™ on Stack Overflow

Toggle check/uncheck for multiple checkbox lists using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related