基于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 相关文章推荐
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
vue实现按钮切换图片
Jan 20 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
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实用代码片段收集贴
2015/06/03 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python浪漫表白源码
2019/04/05 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
飘柔洗发水广告词
2014/03/14 职场文书
人力资源求职信
2014/05/25 职场文书
经济国贸专业求职信
2014/06/18 职场文书
白酒营销策划方案
2014/08/17 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
学校运动会感想
2015/08/10 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
MySQL系列之十二 备份与恢复
2021/07/02 MySQL