基于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 相关文章推荐
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
JS交换变量的方法
Jan 21 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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中使用Oracle数据库(6)
2006/10/09 PHP
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python实现批量下载图片的方法
2015/07/08 Python
python字符串连接方法分析
2016/04/12 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
详解Python字符串切片
2019/05/20 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
浅谈django channels 路由误导
2020/05/28 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
园长自我鉴定
2013/10/06 职场文书
校本培训个人总结
2015/02/28 职场文书
实习报告范文
2019/07/30 职场文书