基于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 面向对象编程基础 多态
Aug 21 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
javascript关于“时间”的一次探索
Jul 24 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
提问的智慧(2)
2006/10/09 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
jQuery的一些注意
2006/12/06 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
python使用电子邮件模块smtplib的方法
2016/08/28 Python
快速了解Python相对导入
2018/01/12 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
管理建议书范文
2014/05/13 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
SQL 聚合、分组和排序
2021/11/11 MySQL