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

fhuan123

浏览: 1024171 次
性别:
来自: 天津

最近访客更多访客>>

njdccy

u012363178

xiaoyoue

梁静茹的小三

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

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!

分享到：

JQuery-Form表单中默认值的改变 | 详解ASP.NET MVC中DropDownList的使用

2011-08-03 14:13
浏览 1743
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论