CODEWITHSUNDEEP
jquery
Roger
Roger

Reputation: 6527

how to check all checkboxes within a div in 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">

Upvotes: 19

Views: 58195

Answers (10)

Amin Eshaq
Amin Eshaq

Reputation: 4024

Try iterating through each items found

$('#selectChb').click(function(){ 
   alert("c!");

   $('#chbDiv').find(':checkbox').each(function(){
      $(this).attr('checked', !checkbox.attr('checked'));
   });
});

Upvotes: 6

Crustamet
Crustamet

Reputation: 104

$(document).on('change', '.toggle', function(e){

    var data_target = $(this);

    if($(data_target).is( ":checked" ))
    {
        var id_module = parseInt($(data_target).attr('id_module'));

        $('#id_perm_module_'+id_module).find(':checkbox').each(function()
        {
            $(this).prop('checked', true);
        });     

    }
    else            
    {
        var id_module = parseInt($(data_target).attr('id_module'));

        $('#id_perm_module_'+id_module).find(':checkbox').each(function()
        {
            $(this).prop('checked', false);
        });             
    }
});

id_perm_module is the div you try to search all checkboxes

Upvotes: 0

Andre Nuechter
Andre Nuechter

Reputation: 2255

I've had a (pseudo)table containing rows of checkboxes which I wanted to be able to check/uncheck with a single click.

To achieve this I assigned ids to the respective rows (with php during a loop) and ended each row with another checkbox which I gave the class "toggle" and the value the same as the id of the enclosing row/div.

Like so:

<div class="table">
  <div class="row" id="rowId">
    <span class="td"><input type="checkbox" name="cb1"></span>
    <span class="td"><input type="checkbox" name="cb2"></span>
    <span class="td"><input type="checkbox" name="cbn"></span>
    <span class="td"><input type="checkbox" class="toggle" value="rowId"></span>
  </div>
...
</div>

Then I created the following script to fire when this checkbox is clicked:

$(".toggle").click(function(){
    var id = this.value;        
    if ($(this).attr("checked")) {
        $(this).attr("checked", false);         
        $('#' + id).find(':checkbox').prop("checked", false);
    } else {
        $(this).attr("checked", true);
        $('#' + id).find(':checkbox').prop("checked", true);            
    }           
});

Hope this helps.

EDIT: Removed global from script and tweaked checking-behavior.

Upvotes: 0

user3909162
user3909162

Reputation: 97

Try this to toggle the check boxes

var bool = false;
    $('#selectAll').click(function(e){
    $('.users-list :checkbox').prop("checked", bool);
    bool = !bool;
});

Upvotes: 0

AJ84
AJ84

Reputation: 175

Was not able to comment on latis answer due to reputation issues.

Kind of really late but this worked for me (all credits to latis)

function checkCheckboxes( id, pID ){
        $('#'+pID).find(':checkbox').each(function(){
            $(this).prop('checked', $('#' + id).is(':checked'));
        });     
    }

Basically replaced attr with prop.

Upvotes: 3

thedotnetguy
thedotnetguy

Reputation: 1

Try replacing 

     $(':checkbox').prop("checked", true);

with

     $(':checkbox').attr("checked", true);

prop is not supported in some browser versions

Upvotes: -1

Ahmed Sakr
Ahmed Sakr

Reputation: 151

Try this code 

 $("#Div_ID").find('input[type=checkbox]').each(function () {
             // some staff
             this.checked = true;
        });

Upvotes: 10

Latis Net
Latis Net

Reputation: 309

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.

Upvotes: 30

Loktar
Loktar

Reputation: 35309

Try the following,

Live Demo

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

Upvotes: 12

Justin
Justin

Reputation: 31

This code will toggle the checkboxes.. uncheck is a class given to a an href. 

$('.uncheck').bind('click', function(e) {

    $(':checkbox').prop('checked', ($(':checkbox').prop('checked')) ? false : true);

    e.preventDefault();

});

Upvotes: 1

Related Questions