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


Posted in Javascript onFebruary 22, 2014
<!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" 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 />
        <span>第2组(b):<input type="checkbox" name="bAll" onclick="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" onclick="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="查找每组的选中的值" onclick="getValues()" />
    </div>
</body>
</html>
Javascript 相关文章推荐
禁止你的左键复制实用技巧
Jan 04 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 #Javascript
jquery中load方法的用法及注意事项说明
Feb 22 #Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 #Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 #Javascript
文本框水印提示效果的简单实现代码
Feb 22 #Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 #Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 #Javascript
You might like
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
关于php中一些字符串总结
2016/05/05 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python解惑之True和False详解
2017/04/24 Python
Anaconda入门使用总结
2018/04/05 Python
Python之文字转图片方法
2018/05/10 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
在线课程:Skillshare
2019/04/02 全球购物
中学生自我鉴定
2014/02/04 职场文书
小学节能减排倡议书
2014/05/15 职场文书
服务承诺书范文
2014/05/19 职场文书
师范生求职自荐信
2014/06/14 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Python中使用subprocess库创建附加进程
2021/05/11 Python
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers