js实现全选和全不选功能


Posted in Javascript onJuly 28, 2020

本文实例为大家分享了js实现全选和全不选的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>操作复选框</title>
</head>
<body>

<input type="checkbox" id="quan"> 全选<br>
<input type="checkbox" name="aihao">游戏<br>
<input type="checkbox" name="aihao">睡觉<br>
</body>
</html>
<script type="text/javascript">

 window.onload=function () {

  var firstChecbox = document.getElementById("quan");
  var aihao=document.getElementsByName("aihao");
  //完成全选和全不选
  //当单击全选时使下方的checkbox中的checked属性为true
  firstChecbox.onclick=function () {
   //遍历下方的checkbox
   //使每一个复选框的属性中的checked和全选的属性保持一致即可实现(不完善)
   for (let i = 0; i <aihao.length ; i++) {
    aihao[i].checked=firstChecbox.checked;
   }
  }
  //如果选中的数量和爱好的总数量一致的就把全选给选中,否则不全选
  //为每一个aihao绑定单击事件
  var all=aihao.length;
  for (let i = 0; i < aihao.length; i++) {
   //绑定单击事件
   aihao[i].onclick=function () {
   //定义选中的数量
    var checkedCount=0;
    for (let i = 0; i < aihao.length; i++) {
    //如果爱好选中就把选中的数量+1;
     if (aihao[i].checked){
      checkedCount++;
     }
     //如果选中的数量和总数相当就把全选给勾选
     if (checkedCount==all){
      firstChecbox.checked=true
     }
     else{
      firstChecbox.checked=false;
     }
    }
   }

  }
 }

</script>

更多关于复选框的文章请点击专题:javascript复选框操作汇总、jquery复选框操作汇总

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

Javascript 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
jQuery的框架介绍
May 11 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
JS常用知识点整理
Jan 21 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
vue全局使用axios的操作
Sep 08 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 #Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 #Javascript
Postman如何实现参数化执行及断言处理
Jul 28 #Javascript
微信小程序实现电子签名功能
Jul 29 #Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 #Javascript
浅谈JavaScript中this的指向问题
Jul 28 #Javascript
浅谈JavaScript中this的指向更改
Jul 28 #Javascript
You might like
php缓存技术详细总结
2013/08/07 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python实现发送邮件及附件功能
2021/03/02 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Python中Yield的基本用法
2020/10/18 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
C语言笔试题回忆
2015/04/02 面试题
你懂得怎么写自荐信吗?
2013/12/27 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
高中生操行评语大全
2014/04/25 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2014年文秘工作总结
2014/11/25 职场文书
法学专业求职信范文
2015/03/19 职场文书
经费申请报告
2015/05/15 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery