基于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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
基于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
一个用于MySQL的PHP XML类
2006/10/09 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
vue.js表格分页示例
2016/10/18 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
js实现轮播图特效
2020/05/28 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python引用计数操作示例
2018/08/23 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
励志演讲稿500字
2014/08/21 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫