基于jQuery实现复选框的全选 全不选 反选功能


Posted in Javascript onNovember 24, 2014

本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家。

jQuery代码:

        $(function(){ 

            $("#checkedAll").click(function(){ 

                $('[name=items]:checkbox').attr('checked',true); 

            }); 

            $("#checkedNo").click(function(){ 

                $('[name=items]:checkbox').attr('checked',false); 

            }); 

            $("#checkedRev").click(function(){ 

                $('[name=items]:checkbox').each(function(){ 

                    //$(this).attr('checked',!$(this).attr('checked')); 

                    this.checked = !this.checked; 

                }); 

            }); 

            $("#send").click(function(){ 

               var str = "你选中的是:\r\n"; 

               $('[name=items]:checkbox:checked').each(function(){ 

                   str += $(this).val()+"\r\n"; 

               }); 

                alert(str); 

            }); 

        }); 

HTML代码:

    你爱好的运动是?<br> 

    <input type="checkbox" name="items" value="足球"/>足球 

    <input type="checkbox" name="items" value="篮球"/>篮球 

    <input type="checkbox" name="items" value="羽毛球"/>羽毛球 

    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br> 

    <input type="button" id="checkedAll" value="全 选"/> 

    <input type="button" id="checkedNo" value="全不选"/> 

    <input type="button" id="checkedRev" value="反 选"/> 

    <input type="button" id="send" value="提 交"/>

小伙伴们使用起来是不是很方便,这也是本人千挑万选出来的,希望能对大家有所帮助。

Javascript 相关文章推荐
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
JavaScript中的类型检查
Feb 03 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
如何用JavaScipt测网速
May 09 Javascript
基于jQuery实现下拉框
Nov 24 #Javascript
基于jQuery实现表单提交验证
Nov 24 #Javascript
jQuery简单实现网页选项卡特效
Nov 24 #Javascript
jQuery选择器全集详解
Nov 24 #Javascript
常见的jQuery选择器汇总
Nov 24 #Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 #Javascript
Javascript学习笔记之数组的构造函数
Nov 23 #Javascript
You might like
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
smarty缓存用法分析
2014/12/16 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
js闭包实例汇总
2014/11/09 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python类的继承实例详解
2017/03/30 Python
python实现随机漫步算法
2018/08/27 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
护理自荐信范文
2013/10/05 职场文书
教师队伍管理制度
2014/01/14 职场文书
环境工程专业自荐信
2014/03/03 职场文书
仓库文员岗位职责
2014/04/06 职场文书
求职信名称怎么写
2014/05/26 职场文书
运动会口号8字
2014/06/07 职场文书
创先争优宣传标语
2014/10/08 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
法院执行局工作总结
2015/08/11 职场文书
python实现剪贴板的操作
2021/07/01 Python