jquery一键控制checkbox全选、反选或全不选


Posted in jQuery onOctober 16, 2017

jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。

Hml的checkbox没有加name,只用了 div 嵌套。

如有更好的方法,望指点!!

//全选
$('#allChecked').change(function(){
   $('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
});
//反选
$('#invertChecked').change(function(){
 if($(this).is(':checked')){
   $('#box').children(':checkbox').each(function(){
    $(this).prop('checked',$(this).is(':checked')?false:true);
   });
 }
});
//一键控制全选、反选、全不选
$('#orChecked').change(function(){
 if($(this).is(':checked')){
   var box = $('#box').children(':checkbox');
   if(box.length==box.filter(':not(:checked)').length){  // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。
   $('#box').children(':checkbox').prop('checked',true);
 }else{   // 如果有选中个数,-> 反选 
   $('#box').children(':checkbox').each(function(){   
    $(this).prop('checked',$(this).is(':checked')?false:true);
   });
 }else{
   $('#box').children(':checkbox').prop('checked',false);  // 如控制键取消选中,剩余的checkbox也取消选中
 }
  
});
<div align="center">
     
   <div id="box">
     <input type="checkbox" value="1">西瓜
     <input type="checkbox" value="2">芒果
     <input type="checkbox" value="3">橙
     <input type="checkbox" value="4">山竹
     <input type="checkbox" value="5">草莓
     <input type="checkbox" value="6">火龙果
   </div>  
       
   <br>
       
   <input type="checkbox" id="allChecked">全选
   <input type="checkbox" id="invertChecked">反选
   <input type="checkbox" id="orChecked">全选/反选/全不选
       
 </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 #jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 #jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 #jQuery
You might like
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
详解JavaScript的策略模式编程
2015/06/24 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python正则分析nginx的访问日志
2017/01/17 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
利用Python计算KS的实例详解
2020/03/03 Python
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
大学总结自我鉴定
2014/01/18 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
年会主持词结束语
2014/03/27 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
python数字图像处理:图像简单滤波
2022/06/28 Python