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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
json 实例详细说明教程
2009/10/31 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
快速入门Vue
2016/12/19 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
django-filter和普通查询的例子
2019/08/12 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
群众路线教育实践活动方案
2014/02/02 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
公司担保书格式范文
2014/05/12 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
日语专业求职信
2014/07/04 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
python实现A*寻路算法
2021/06/13 Python