Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to check all checkboxes within a div in jQuery?

Tags:

jquery

EDIT:

Thanks for the answers guys, it does look correct and it works on jsfiddle.net , but in my code the alert fires well, yet nothing happens to the checkboxes. :/

     $('#selectChb').click(function(){
         $(':checkbox').prop("checked", true);
         alert("1");
    });

     $('#deselectChb').click(function(){
         $(':checkbox').prop("checked", false);
         alert("2");
    });

...

<div id="chbDiv" class="ui-widget ui-widget-content ui-corner-all" >  <br></br>
  <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
    <td colspan="2">Following:</td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td width="25" align="left"><input type="checkbox" id="check1" /><label for="check1">&nbsp;</label></td>
    <td width="45" align="center"><img src="face_01.jpg" width="32" height="32"></td>
    <td>Andrew Lloyd Webber</td>
  </tr>
      <tr>
    <td width="25" align="left"><input type="checkbox" id="check2" /><label for="check2">&nbsp;</label></td>
    <td width="25" align="center"><img src="face_02.jpg" width="32" height="32"></td>
    <td>Richard Branson</td>
  </tr>
      <tr>
    <td width="25" align="left"><input type="checkbox" id="check3" /><label for="check3">&nbsp;</label></td>
    <td width="25" align="center"><img src="face_03.jpg" width="32" height="32"></td>
    <td>Dmitry Medvedev</td>
  </tr>
</table>
  <br>
  <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td><a href="#" id="selectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Select All</a>&nbsp;
      <a href="#" id="deselectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span>Deselect All</a></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    </table>
<br>

</div>
  <br>
  <div  class="ui-widget ui-widget-content ui-corner-all">
like image 411
Roger Avatar asked Jun 03 '11 19:06

Roger


3 Answers

This is a derived ultimate solution that finds all checkboxes inside a DIV and checks or unchecks according to an other single checkbox outside the DIV which says check/uncheck

    function checkCheckboxes( id, pID ){

    $('#'+pID).find(':checkbox').each(function(){

        jQuery(this).attr('checked', $('#' + id).is(':checked'));

    });     

}

Usage:

<label>check/uncheck  
<input type="checkbox" id="checkall" value="1" 
onclick="checkCheckboxes(this.id, 'mycheckboxesdiv');" >
</label>

<div id="mycheckboxesdiv">
<input type="checkbox" value="test1" name="test">
<input type="checkbox" value="test2" name="anothertest">
<input type="checkbox" value="test3" name="tests[]">
<input type="checkbox" value="test1" name="tests[]">
</div>

Advantage is you can use independent checkbox sets and check / uncheck all independent from other sets. It is simple and no need to work with id or classes of each checkboxes.

like image 136
Latis Net Avatar answered Nov 07 '22 00:11

Latis Net


Try the following,

Live Demo

$('#selectChb').click(function(){ 
     $(':checkbox').prop("checked", true);
});
like image 29
Loktar Avatar answered Nov 07 '22 01:11

Loktar


Try this code

 $("#Div_ID").find('input[type=checkbox]').each(function () {
             // some staff
             this.checked = true;
        });
like image 8
Ahmed Sakr Avatar answered Nov 07 '22 01:11

Ahmed Sakr