基于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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
vue写h5页面的方法总结
Feb 12 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 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来检测proxy
2006/10/09 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
python 动态加载的实现方法
2017/12/22 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Numpy之reshape()使用详解
2019/12/26 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
英国标准协会商店:BSI Shop
2019/02/25 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
红色故事演讲稿
2014/05/22 职场文书
学校督导评估方案
2014/06/10 职场文书
自荐信格式范文
2015/03/04 职场文书
python小程序之飘落的银杏
2021/04/17 Python
5道关于python基础 while循环练习题
2021/11/27 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python