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

最新推荐文章于 2022-04-09 22:09:53 发布

fhuan123

最新推荐文章于 2022-04-09 22:09:53 发布

阅读量134

点赞数

分类专栏： JQuery 文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/fhuan123/article/details/83980420

版权

JQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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!

fhuan123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫