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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
js下载文件并修改文件名
May 08 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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程序中防止盗链
2008/04/09 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
荷兰超市:DEEN
2018/03/14 全球购物
旷课检讨书大全
2014/01/21 职场文书
保护动物倡议书
2014/04/15 职场文书
软环境建设心得体会
2014/09/09 职场文书
大学生作弊检讨书
2014/09/11 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
离婚答辩状范文
2015/05/22 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
合同补充协议书
2016/03/24 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android