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 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
php5数字型字符串加解密代码
2008/04/24 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP中overload与override的区别
2017/02/13 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Django视图和URL配置详解
2018/01/31 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
金融专业推荐信
2013/11/14 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
导游词欢迎词
2015/02/02 职场文书
入党积极分子个人总结
2015/03/02 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
python 提取html文本的方法
2021/05/20 Python
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python