Check all 'Checkbox' with jQuery

You have seen that some websites use Select all checkbox like gmail and provide facility to users to select all checkboxes easily. This can be implemented to your site and it is fun and very easy. You will enjoy learning this.

To make this script first include jQuery then follow the code:

HTML Code

<table>

<tr>

<th><input type="checkbox" id="selectall"/></th>

<th>Cell phone</th>

<th>Rating</th>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>

<td>BlackBerry Bold 9650</td>

<td>2/5</td>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>

<td>Samsung Galaxy</td>

<td>3.5/5</td>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>

<td>Droid X</td>

<td>4.5/5</td>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>

<td>HTC Desire</td>

<td>3/5</td>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>

<td>Apple iPhone 4</td>

<td>5/5</td>

</tr>

</table>

jQuery Script

$(function()

{

// add multiple select / deselect functionality

$("#selectall").click(function () {

$('.case').attr('checked', this.checked);

});

    

// if all checkbox are selected, check the selectall checkbox

$(".case").click(function(){

if($(".case").length == $(".case:checked").length) {

$("#selectall").attr("checked", "checked");

} else {

$("#selectall").removeAttr("checked");

}

});

});