基于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中用星号表示预录入内容的实现代码
Jan 08 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
vue实现登录拦截
Jun 29 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
js中!和!!的区别与用法
2020/05/09 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python Trie树实现字典排序
2014/03/28 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python分割文件的常用方法
2014/11/01 Python
Python中的包和模块实例
2014/11/22 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python内存动态分配过程详解
2019/07/15 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
小小的船教学反思
2014/02/21 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android