基于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代码经典广告
Oct 21 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
Angular8路由守卫原理和使用方法
Aug 29 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中json_encode()和json_decode()
2014/05/25 PHP
PHP常用技巧汇总
2016/03/04 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
使用Python写CUDA程序的方法
2017/03/27 Python
python实现决策树分类(2)
2018/08/30 Python
python绘制热力图heatmap
2020/03/23 Python
python requests.post带head和body的实例
2019/01/02 Python
使用python实现kNN分类算法
2019/10/16 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
python import 上级目录的导入
2020/11/03 Python
浅析Python的命名空间与作用域
2020/11/25 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
留学自荐信
2013/10/10 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
农村婚礼主持词
2014/03/13 职场文书
财务负责人任命书
2014/06/06 职场文书
辞职信范文大全
2015/03/02 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL