check all checkboxes

Question

I have a table with checkboxes and I want to do the "check all" and "un-check all" checkboxes but I could not find the way to check all the checkboxes.

Here is my code:

<form>
    <?php foreach ($this->entries as $entry): ?>
        <tr class="table_head_seperator">
            <td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]"  /></td>
            <td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name"><?php echo $entry['user_name'] ?></span></td>
            <td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name"><?php echo $entry['date_created'] ?></span></td>
            <td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name"><?php echo $entry['user_type_name'] ?></span></td>
        </tr>
    <?PHP endforeach; ?>

    <input type="checkbox" class="chk_boxes" label="check all"  />check all
    <input type="checkbox" class="unchk_boxes"   /> un-check all
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $('.chk_boxes').click(function(){
            $('.chk_boxes1').attr('checked',checked)
        })
    });
</script> 

Solution 1

$(function() {
    $('.chk_boxes').click(function() {
        $('.chk_boxes1').prop('checked', this.checked);
    });
});

This only affects the check all box. But why would you want to use two checkboxes anyway? One to check all and one to uncheck all, but not mutually exclusive. That's got to be the recipe to confuse users :)

Solution 2

Try using true|false. Like so:

$('.chk_boxes1').attr('checked',true);

Additional comment:

In addition, it appears your un- and check all checkboxes are redundant.

<input type="checkbox" class="chk_boxes" label="check all"  />check all
<input type="checkbox" class="unchk_boxes"   /> un-check all

Rather than doing that, you can just have one checkbox that does both. Thus, your jQuery will look like:

$(document).ready(function() {
    $('.chk_boxes').click(function(){
            $('.chk_boxes1').attr('checked',$(this).attr('checked'));
    })
});

With HTML:

<input type="checkbox" class="chk_boxes" label="check all"  />check all

Solution 3

See the working solution here http://jsfiddle.net/HBGzy/

you don't need to use the "uncheck all" checkbox :)

$('.chk_boxes').click(function(){
    var chk = $(this).attr('checked')?true:false;
    $('.chk_boxes1').attr('checked',chk);
});

Solution 4

You forgot about quotes:

$('.chk_boxes1').attr('checked','checked')

fiddle: http://jsfiddle.net/8ZHFn/

Solution 5

Try this

 $(".chk_boxes").click(function()
   {
   var checked_status = this.checked;
   $(".chk_boxes1").each(function()
     {
      this.checked = checked_status;
     });
  });

So, if the class name of all the checkboxes you want to affect when checking or unchecking the checkbox with class chk_boxes,is chk_boxes1 this will get all the elements and set the checked property accordingly.

View more solutions

Comments

[T.J. Crowder]

Only with jQuery 1.6.x or higher. Alex R's will work with any version of jQuery except for the very short-lived 1.6.0, which lasted about two weeks for this very reason.

[jensgram]

@T.J. Crowder Indeed, the .prop() can be replaced with .attr() if running jQuery below 1.6.0. Thanks for clarifying.

[T.J. Crowder]

My point is that attr also works in 1.6.1 and above. So if you're going to use a jQuery accessor to do this, I'd use attr rather than prop. But horses for courses, and in a year or two everyone will be on 1.6 anyway. :-)

[Brock Adams]

Please include the relevant code in the answer post.

[Brock Adams]

Thank you. +1.