基于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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
d3.js实现图形拖拽
Dec 19 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
hessian 在PHP中的使用介绍
2010/12/13 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
php查询内存信息操作示例
2019/05/09 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
参观接待方案
2014/03/17 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
邓小平理论心得体会
2014/09/09 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
试用期自我评价范文
2015/03/10 职场文书
大学军训通讯稿
2015/07/18 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书