In this post we will see the use of jQuery in finding the count of checked and unchecked items from a list of checkboxes along with their count. This is also one of the common problems I faced and looked into how to use not selector and also found that count comes as not expected many a times so whats the reason behind that.
Let’s take a look at a generic example page where we have a list of checkboxes inside a table enclosed in a div (you can use any other scenario like a div having a list of checkbox elements only or a combination of checkboxes and other elements in it).
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<% if (false)
{ %>
<script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
<% }%>
<script type="text/javascript">
//Write your code when Document is loaded
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
$("#tblSub").click(function() {
//show count of all not checked checkboxes only
alert($("#testTB :input:not(:checked)").size());
//show count of all not checked elements
alert($("#testTB :not(:checked)").size());
//function to print the value of each not checked checkboxes
$("#testTB :input:not(:checked)").each(function() {
alert("value = " + $(this).val());
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
<input id="testChk" type="button" value="Submit" />
<table id="testTB">
<thead>
<tr>
<th>test</th>
<th>chk boxes</th>
</tr>
</thead>
<tbody>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="1" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="2" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="3" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="4" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="5" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="6" /></td></tr>
</tbody>
</table>
<input id="tblSub" type="button" value="Submit" />
</div>
</form>
</body>
</html>
Since everything is present in UI so I am not giving the code behind as it would be default without any changes to verify how the above is working.
Here are few lines to take a look upon:
//show count of all not checked checkboxes only
1) alert($(“#testTB :input:not(:checked)”).size());
//show count of all not checked elements
2) alert($(“#testTB :not(:checked)”).size());
In the first one we get the count of all non checked checkboxes only because it uses an addition filter of ‘input’ tag type which is how checkboxes get rendered in html. In case we dont use it as in 2) example then we get all the elements inside div testTB which dont have checked attribute so it return all the tr, td etc elements along with input elements thereby increasing the count of return set.
This is a simple example but would help you in case you are trying to find the non cheched elements and getting unexpected count. The reason there would be that all the checkboxes are not inside one container and hence you would have to use the input tag type. Also you might have to consider addition filtering in case the same container contains other input elements as then not will filter those also in result set causing unexpected count. Som the gist is that either you do the wrapping in such a way that these checkboxes are clubbed together or else you need to use additional filter to find the right result set.
Hope this helps!
bye for now.
-Sushant
I’m Nigel Tomm – thanks – I’ll try it.
It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
p.s. You have a very good template for your blog. Where did you find it?
Thanks a lot Sushant – this post was extremely helpful to me
Thanks a lot for this. This was exactly what I was looking for.
Not work
hi Chirox,
Could you please let me know your exact scenario and is possible some code snippet to see why it didn’t work as I tested the code and it seems to work well. I would be happy to resolve it.
Thanks.
Hi!
This tutorial has proved very helpful for me.
I would like to pay thanks to author
Cheers
thanks bro…
This tutorial helps me so much. But, there are some errors in your script.
You are missing closing statement “});” in part “$(“#testCheck :checked”).each(….”.
Thanks Sushant. I was looking to get checked and unchecked items separately and this helped.
nice helpful post. Keep on posting more
nice one
awesome post
check:
http://www.sharemycode.com/item/view/75/jquery-how-to-check-if-a-checkbox-is-checked
Online Classifieds…
[...]jQuery: Get the checked and unchecked items from list of checkboxes « Sushantp’s Weblog[...]…
Thankz !…
[...]jQuery: Get the checked and unchecked items from list of checkboxes « Sushantp’s Weblog[...]…
Kompass…
[...]jQuery: Get the checked and unchecked items from list of checkboxes « Sushantp’s Weblog[...]…