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> 

Answer 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:)

Answer 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

Answer 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);
});

Answer 4

You forgot about quotes:

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

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

Answer 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.

Answer 6

Check-uncheck all / select-unselect all checkboxes Follow the following code, its really simple with the following code

inside your html form add the following line of code

<input type="checkbox" id='checkall' /> Select All

and than add the following script

     <script type='text/javascript'>
 $(document).ready(function(){
   // Check or Uncheck All checkboxes
   $("#checkall").change(function(){
     var checked = $(this).is(':checked');
     if(checked){
       $(".checkbox").each(function(){
         $(this).prop("checked",true);
       });
     }else{
       $(".checkbox").each(function(){
         $(this).prop("checked",false);
       });
     }
   });
 
  // Changing state of CheckAll checkbox 
  $(".checkbox").click(function(){
 
    if($(".checkbox").length == $(".checkbox:checked").length) {
      $("#checkall").prop("checked", true);
    } else {
      $("#checkall").removeAttr("checked");
    }

  });
});
</script>

keep in mind that.checkbox in script code is the class name from other checkboxes of html form

for example if you have input checkbox as following

<input class="checkbox" name="emailid[]" type="checkbox" value="<?php echo $email;?>" />

Answer 7

i think you should use the true or false for the checkbox attribute.

Answer 8

<script type="text/javascript" charset="utf-8">
$('document').ready( function() {
    $('.chk_boxes').click( function() {
        $(':checkbox').attr('checked',true);
    });
});
</script>

Answer 9

An advice about check all/uncheck all.. As my think after selecting check all, if user clicks any of checkbox1s, the check all checkbox should be unchecked and also without clicking check all box, if user selects all checkbox1s one by one the checkbox should be selected. So i suggest you to try this when using check all/uncheck all..

$(document).ready(function() {
    $('.chk_boxes').click(function(){
        $('.chk_boxes1').attr('checked',$(this).attr('checked'));
    })
    $('.chk_boxes1').click(function(){
        if($('.chk_boxes1').length == $('.chk_boxes1:checked').length)
              $('.chk_boxes').attr('checked',checked)
        else
             $('.chk_boxes').attr('checked',false)
    })
});