jQuery: Get the checked and unchecked items from list of checkboxes

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

About these ads

19 Responses to jQuery: Get the checked and unchecked items from list of checkboxes

  1. Nigel Tomm says:

    I’m Nigel Tomm – thanks – I’ll try it.

  2. mssmotorrd says:

    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?

  3. Andrei says:

    Thanks a lot Sushant – this post was extremely helpful to me :D

  4. Rokham Fard says:

    Thanks a lot for this. This was exactly what I was looking for.

  5. sushantp says:

    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.

  6. Muhammad Jamil says:

    Hi!
    This tutorial has proved very helpful for me.
    I would like to pay thanks to author

    Cheers

  7. otidh says:

    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(….”.

  8. Dheeru says:

    Thanks Sushant. I was looking to get checked and unchecked items separately and this helped.

  9. Ravi Gupta says:

    nice helpful post. Keep on posting more :)

  10. Online Classifieds…

    [...]jQuery: Get the checked and unchecked items from list of checkboxes « Sushantp’s Weblog[...]…

  11. Thankz ! says:

    Thankz !…

    [...]jQuery: Get the checked and unchecked items from list of checkboxes « Sushantp’s Weblog[...]…

  12. Kompass says:

    Kompass…

    [...]jQuery: Get the checked and unchecked items from list of checkboxes « Sushantp’s Weblog[...]…

  13. Jagan says:

    Thanks.. useful post. saved me time.

  14. With havin so much content and articles do you ever run
    into any problems of plagorism or copyright violation? My site
    has a lot of exclusive content I’ve either written myself or outsourced but it seems a lot of it is popping it up all over the internet without my permission. Do you know any methods to help stop content from being ripped off? I’d really
    appreciate it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Effect Labs Tech News

Who am I what am I doing?

Effect Labs Blog

Who am I what am I doing?

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: