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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jquery实现穿梭框功能
Jan 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
PHP7 新增常量
2021/03/09 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python素数检测的方法
2015/05/11 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python读写json文件的简单实现
2017/04/11 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python中join()方法介绍
2018/10/11 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python的形参和实参使用方式
2019/12/24 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
UNIX特点都有哪些
2016/04/05 面试题
党课培训主持词
2014/04/01 职场文书
志愿者活动总结范文
2014/04/26 职场文书
化学教育专业自荐信
2014/07/04 职场文书
中职招生先进个人材料
2014/08/31 职场文书
实习生辞职信范文
2015/03/02 职场文书
质检员工作总结2015
2015/04/25 职场文书