jquery checkbox 全选/全不选的通用写法

最新推荐文章于 2024-01-23 19:19:19 发布

吉普赛的歌

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量1.8k

点赞数

分类专栏：前端 - jQuery

本文链接：https://blog.csdn.net/yenange/article/details/8543772

版权

前端 - jQuery 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        //name 是html表单专用于区别各组 chechbox 的属性， 不要用id(必须唯一)或者其它属性
        function getValues() {
            var aV = getCheckboxValues("a");
            var bV = getCheckboxValues("b");
            var cV = getCheckboxValues("c");

            var result = "a组选中值: " + (aV=="" ? "未选中任何值" : aV) + "\n" +
                "b组选中值: " + (bV == "" ? "未选中任何值" : bV) + "\n" +
                "c组选中值: " + (cV == "" ? "未选中任何值" : cV);

            alert(result);
        }

        function getCheckboxValues(name) {
            return $(":checkbox[name="+name+"]:checked").map(function(){  
                return $(this).val(); 
            }).get().join(",");
        }

        function chkAll(obj) {
            var name = $(obj).attr("name");
            //也许你觉得我写得太复杂， 但jquery 版本众多， 可以学点东西总是好的
            //1. jquery 1.6 以上
            //$(":checkbox[name=" + name.substring(0, 1) + "]").prop("checked", $(obj).prop("checked"));
            //2. jquery 1.6 以下
            //$(":checkbox[name=" + name.substring(0, 1) + "]").attr("checked", $(obj).attr("checked"));
            //3. 通用写法
            $(":checkbox[name=" + name.substring(0, 1) + "]").each(function () {
                this.checked = obj.checked;
            });
        }
    </script>
</head>
<body>
    <div >
        <span>第1组(a)：<input type="checkbox" name="aAll" οnclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="a" value="a1" checked="checked" />a1
        <input type="checkbox" name="a" value="a2" checked="checked"  />a2
        <input type="checkbox" name="a" value="a3" />a3
        <input type="checkbox" name="a" value="a4" />a4<br />

        <span>第2组(b)：<input type="checkbox" name="bAll" οnclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="b" value="b1" />b1
        <input type="checkbox" name="b" value="b2" checked="checked" />b2
        <input type="checkbox" name="b" value="b3" checked="checked"  />b3
        <input type="checkbox" name="b" value="b4" />b4<br />

        <span>第3组(c)：<input type="checkbox" name="cAll" οnclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="c" value="c1" />c1
        <input type="checkbox" name="c" value="c2" />c2
        <input type="checkbox" name="c" value="c3" checked="checked" />c3
        <input type="checkbox" name="c" value="c4" checked="checked"  />c4<br />

        <br />
        <input type="button" value="查找每组的选中的值" οnclick="getValues()" />
    </div>
</body>
</html>

吉普赛的歌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery checkbox 全选/全不选的通用写法

//name 是html表单专用于区别各组 chechbox 的属性，不要用id(必须唯一)或者其它属性 function getValues() { var aV = getCheckboxValues("a"); var bV = getCheckboxValues("b"); var cV = getC
复制链接

扫一扫