`

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

JavaScript 
阅读更多

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!

分享到：
| 详解ASP.NET MVC中DropDownList的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics