基于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 prototype 原型链
Mar 12 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 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的可变变量名需要的注意的问题
2013/06/20 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
Laravel 队列使用的实现
2019/01/08 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
npm ci命令的基本使用方法
2020/09/20 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
在python中安装basemap的教程
2018/09/20 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Python容器类型公共方法总结
2020/08/19 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
用python实现一个简单的验证码
2020/12/09 Python
以太网Ethernet IEEE802.3
2013/08/05 面试题
电钳专业个人求职信
2014/01/04 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
采购员工作总结范文
2015/08/12 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python