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操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 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邮件发送,php发送邮件的类
2011/03/24 PHP
php全角字符转换为半角函数
2014/02/07 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP使用递归生成文章树
2015/04/21 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
户外宣传策划方案
2014/05/25 职场文书