jquery实现checkbox 全选/全不选的通用写法 - Web前端

作者：98wpeu发布时间：2026-05-22分类：网页前端技术浏览：3

导读：复制代码代码如下:<!DOCtypehtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html>...

复制代码代码如下:
<!DOCtypehtml 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(必须唯一)或者其它属性
        functiongetvalues() {
            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" onclick="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 />

标签：写法全选不选 Web checkbox jquery

上一篇：Jquery中ajax方法data参数的用法小结 - Web前端
下一篇：jquery easyui中treegrid用法的简单实例 - Web前端

jquery实现checkbox 全选/全不选的通用写法 - Web前端

相关推荐