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的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
js实现右键自定义菜单
Dec 03 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
vue组件系列之TagsInput详解
May 14 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开发大型项目的一点经验
2006/10/09 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
JS Array对象入门分析
2008/10/30 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
window.location.hash知识汇总
2015/11/09 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Django框架模板用法入门教程
2019/11/04 Python
Python常用外部指令执行代码实例
2020/11/05 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
大客户销售经理职责
2013/12/04 职场文书
家长通知书家长评语
2014/04/17 职场文书
团拜会策划方案
2014/06/07 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
语文教师个人工作总结
2015/02/06 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
台风停课通知
2015/04/24 职场文书
公司催款律师函
2015/05/27 职场文书
海弦WR-800F
2022/04/05 无线电