基于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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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 array_intersect()函数使用代码
2009/01/14 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
python单例模式实例分析
2015/04/08 Python
Python json模块使用实例
2015/04/11 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
ASP.NET Core中的配置详解
2021/02/05 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
电气技术员岗位职责
2013/11/19 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
养成教育工作总结
2015/08/13 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL