Test your technical skills online, appear in Virtual Interview and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Make friends on DotNetFunda.com and expand your network!
Winners

Win Prizes

Announcements
Like us on Facebook
Sponsor
Top Articles Author
Fri, 18-Apr-2014 Authors
All Time Authors
Sourav.Kayal
39750
SheoNarayan
34800
Niladri.biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

Check/Uncheck All Checkboxes with JQuery

Virendradugar
Posted by under jQuery category on for Beginner level | Views : 77026 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 4.5 out of 5
4 vote(s)

This article demonstrate how to achieve one of the common functionality that is check-uncheck all checkboxes using Jquery.

 Download source code for Check/Uncheck All Checkboxes with JQuery


Introduction


This particular article is about a pretty common functionality which I think most of the software engineers face in their projects. Even I came across the same situation many times. Previously I used to achieve the functionality via JavaScript, which really worked flawlessly. But as a software engineer, I think one should always adapt the new technology. So, this time I tried to achieve the same via JQuery as its booming now and one need to upgrade himself. So what functionality are we talking about? See below given image.



Okay. So you must have got the idea about the functionality. Yes, you guessed it right. It’s about selecting all the items of CheckBoxList, when select all is checked. You can find thousands of solution using Jquery when you google it. Then why you are here. Well, in fact I googled a lot but didn’t even come across to a single article which solves my purpose. Let me explain the requirement of the functionality here.

Problem


  1. When “Select All” CheckBox is checked, it must change the status of all the items of the CheckBox list as per “Select All” status. For e.g., if “Select All” is true then all the items of the checkbox list must be set to true or vice versa. See Image 2.
    Image 2


  2. Assume, “Select All” is true and all the items of the CheckBox list are also true. But when I uncheck any item of checkbox list, it must also uncheck the select all button. See Image 3.

    Image 3


  3. Assume, “Select All” is unchecked. And one of the items in the CheckBox list is also unchecked. But now when I check the CheckBox list item, then “Select All” must be checked. As all the items in the CheckBox list are checked.
Solution

So let’s go directly to the code.

Prerequisite: I assume that you know the basics of JQuery. Read this article for information on Introduction to JQuery.

HTML content of the page.
<table cellpadding="2" cellspacing="2" width="50%">
<tr>
<th align="left" style="font-family:Arial;">
<h3>
Checkbox Select All Demo using JQuery</h3>
</th>
</tr>
<tr>
<td>
&nbsp;<asp:CheckBox ID="chkSelectAll" runat="server" Text="Select All" Font-Size="9pt" Font-Names="Arial" />
</td>
</tr>
<tr>
<td>
<asp:CheckBoxList ID="chkItems" runat="server" Width="200px" Font-Size="9pt" Font-Names="Arial" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px">
</asp:CheckBoxList>
</td>
</tr>
</table>
Well, I have placed a CheckBox “Select All” with ID “chkSelectAll” and a checkbox list with ID “chkItems”.

Below is my JQuery code.
<script type="text/javascript">
$(document).ready(function() {
$("#<%=chkSelectAll.ClientID %>").click(function() {
$("#<%= chkItems.ClientID %> input:checkbox").attr('checked',this.checked);
});

$("#<%=chkItems.ClientID %> input:checkbox").click(function(){
if($("#<%= chkSelectAll.ClientID %>").attr('checked') == true && this.checked == false)
$("#<%= chkSelectAll.ClientID %>").attr('checked',false);

if(this.checked == true)
CheckSelectAll();
});

function CheckSelectAll()
{
var flag = true;
$("#<%=chkItems.ClientID %> input:checkbox").each(function() {
if(this.checked == false)
flag = false;
});
$("#<%= chkSelectAll.ClientID %>").attr('checked',flag);
}

});

</script>
Well above given code solves my purpose. Let’s go through the code function by function.
$("#<%=chkSelectAll.ClientID %>").click(function() {
$("#<%= chkItems.ClientID %> input:checkbox").attr('checked',this.checked);
});
This code binds click event to “Select All” checkbox. It will search for all the checkbox inside the checkItems (as checkbox list, when rendered becomes a table. See the view source.) and set the checked attribute to the value of “Select All” checkbox. 2 Lines of code can serve your purpose. That’s why I love JQuery.

Next function binds the click event to every
CheckBox of CheckBox list.
$("#<%=chkItems.ClientID %> input:checkbox").click(function(){
Inside the function, it first check for the status of “Select All”. If it’s true and the clicked CheckBox is unchecked (see Image 3), then it will uncheck the “Select All” CheckBox .
if($("#<%= chkSelectAll.ClientID %>").attr('checked') == true && this.checked == false)
$("#<%= chkSelectAll.ClientID %>").attr('checked',false);
Next task is, if the clicked CheckBox item status is checked, then we need to check the status of all the items of CheckBox list and if every item is checked, then we must check the “Select All” CheckBox.
if(this.checked == true)
CheckSelectAll();
This will call a function “CheckSelectAll”. This function iterates through the CheckBox list and finds all the items are checked or not. If yes, then it sets the status of “Select All” CheckBox accordingly.
function CheckSelectAll(){
var flag = true;
$("#<%=chkItems.ClientID %> input:checkbox").each(function() {
if(this.checked == false)
flag = false;
});
$("#<%= chkSelectAll.ClientID %>").attr('checked',flag);
}
each() method of JQuery will performs the iteration for specified item.

That’s it. Hope this will help you in your work.

Enjoy,

Virendra

Page copy protected against web site content infringement by Copyscape
Found interesting? Add this to:




About the Author

Virendradugar

Full Name: Virendra Dugar
Member Level: Silver
Member Status: Member,MVP
Member Since: 8/11/2009 4:14:05 AM
Country: India

http://jquerybyexample.blogspot.com

Virendra Dugar is experienced Senior Software Developer with over 5 years of hands-on experience working with Microsoft .NET technology (ASP.NET, C#, VB.NET,SQL Server). He is always keen to learn new technology. He holds a Master's Degree in Computer Application & Information technology from Gujarat University in india.In free time, he loves to listen music, read books, play games and do blogging etc. Visit his blogs : http://jquerybyexample.blogspot.com
Login to vote for this post.

Comments or Responses

Posted by: Jac on: 8/18/2010 | Points: 10

Great start, I did a slightly different version.
Inside the 2nd function, $("#<%=chkItems.ClientID %> input:checkbox").click(function(){.....}).
Use ".filter(..)" to get the the count of checked items, then match it with the Total count of check items, this will gives you a boolean value which you can set as "checked" attribute for the "chkSelectAll".

example:

var checkedcount ......
var totalcount ......
$("#<%=chkSelectAll.ClientID %>").attr("checked", checkedcount == totalcount);

Posted by: Buttroast98 on: 8/23/2010 | Points: 10

I made an improvement to this script so you do not have to have any server side code in it. Please see my post at http://tech.tiffanyandjeremy.com/Articles/Two-level-JQuery-check-and-uncheck-all-child-checkboxes-of-a-parent-checkbox.


Login to post response.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.

Comment using Facebook