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 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
Require.js的基本用法详解
Jul 03 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 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
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Python的re模块正则表达式操作
2016/05/25 Python
Python 登录网站详解及实例
2017/04/11 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
Java中实现多态的机制
2015/08/09 面试题
秘书专业自荐信范文
2013/12/26 职场文书
善意的谎言事例
2014/02/15 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
内勤主管岗位职责
2014/04/03 职场文书
国庆横幅标语
2014/10/08 职场文书
招商银行工作证明
2015/06/17 职场文书
老兵退伍感言
2015/08/03 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android