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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现推拉门效果
Oct 19 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
js实现上传图片预览的方法
2015/02/09 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
python图像处理之镜像实现方法
2015/05/30 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
python代码能做成软件吗
2020/07/24 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
linux面试相关问题
2013/04/28 面试题
学年末自我鉴定
2014/01/21 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
收费员岗位职责
2015/02/14 职场文书
教师创先争优承诺书
2015/04/27 职场文书
庆元旦主持词
2015/07/06 职场文书
干部考核工作总结
2015/08/12 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL