基于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的AJAX用法
May 10 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php中取得文件的后缀名?
2012/02/20 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
node.js基础知识汇总
2020/08/25 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python封装shell命令实例分析
2015/05/05 Python
浅谈Python中的闭包
2015/07/08 Python
Python实战购物车项目的实现参考
2019/02/20 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
wxPython实现整点报时
2019/11/18 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
师范院校学生自荐信范文
2013/12/27 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
创先争优活动方案
2014/02/12 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
护士先进个人总结
2015/02/13 职场文书
运动会100米加油稿
2015/07/21 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python