热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要为大家详细介绍了jquery一键控制checkbox全选、反选或全不选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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也取消选中
 }
  
});
 
西瓜 芒果 山竹 草莓 火龙果

全选 反选 全选/反选/全不选

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


推荐阅读
  • 一、vue-resource1、引入资源方式1)下载vue-resource.js,添加到项目中2)CDN:http:www ... [详细]
  • div显示如下div中添加的html,进行拼接$(#showResult).append(html);在div中添 ... [详细]
  • 写在前面用简单的另一种方法实现导航栏滑动特效。代码.line{float:none;position:absolute; ... [详细]
  • 利用JavaScript的函数有两种方式1.jQueryjQuery.inArray(value,array[,fromIndex])value类型: Anything要查找的值。 ... [详细]
  • 我正在使用jQuery并让服务器代码返回以下值0:SELECTONE;1:VALUE1;2:VALUE2etc如何将其填充到 ... [详细]
  • 本文目录一览:1、java中几种解析html的工具 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
author-avatar
最好的zixue
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有