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> </td>
</tr>
<tr>
<td width="25" align="left"><input type="checkbox" id="check1" /><label for="check1"> </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"> </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"> </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>
<a href="#" id="deselectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span>Deselect All</a></td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
</div>
<br>
<div class="ui-widget ui-widget-content ui-corner-all">
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.
Try the following,
Live Demo
$('#selectChb').click(function(){
$(':checkbox').prop("checked", true);
});
Try this code
$("#Div_ID").find('input[type=checkbox]').each(function () {
// some staff
this.checked = true;
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With