top_menu

Tuesday, 4 September 2012

Gmail type select all checkbox using jQuery

.

Select all checkbox selects all its child checkboxes. Just like gmail where we use it to select all following emails.

select all checkbox

Following is the HTML Code that is used for placement of elements with a little css styling

<style type="text/css">

.header {
 padding:20px;
 margin-top:10px;
 margin-left:auto;
 margin-right:auto;
 width:900px;
 border:1px solid #eee;
}
.content{
 padding:50px;
 margin-top:10px;
 margin-left:auto;
 margin-right:auto;
 width:840px;
 border:1px solid #eee;
}
.selectAll{
 background:#F1F1F1;
 width:50px;
 padding:5px 20px;margin-right:20px;
 border:1px solid #DBDBDB;
 border-radius: 3px;
}

</style>
</head>
<body>

<div class="header">
<span class="selectAll">
<input type="checkbox" id="selectall"/>
</span><strong>Select All Tutorials related to Facebook</strong> 
</div>
<div class="content">
<input type="checkbox" class="item" value="1"/>
<a href="http://www.2lessons.info/2012/03/facebook-type-vertical-navigation-menu.html">Facebook type vertical navigation menu created with jquery</a><br/>
<input type="checkbox" class="item" value="2"/>
<a href="http://www.2lessons.info/2012/05/how-to-create-facebook-style-activity.html">How to create a facebook style activity notification plugin using jQuery and PHP – facebook beeper</a><br/>
<input type="checkbox" class="item" value="3"/>
<a href="http://www.2lessons.info/2011/12/facebook-like-red-notification-simple.html">Facebook like red notification simple css technique</a><br/>
</div>

<span class="selectAll">
<a href="http://www.2lessons.info/2012/09/gmail-type-select-all-checkbox-using.html">Back to tutorial<a>
</span>
</body>

The main jQuery part

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.item').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox and viceversa
$(".item").click(function(){
if($(".item").length == $(".item:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}

});
});
</script>