首页 > 其他 > 详细

多选全选框使用addEvenListener实现

时间:2020-02-09 19:43:13      阅读:50      评论:0      收藏:0      [点我收藏+]

第一步,既然是全选和多选,那么一定需要鼠标去点击,那么我就先分别获取它们的id,然后给它们加个点击事件

           //获取全选框的id
      var allCheck = document.getElementById("allCheck");
       //添加点击事件 allCheck.addEventListener(
"click",clickHandler);
       //获取其他选择框的id
for(var i = 1 ;i < 5;i++){ var check = document.getElementById("check"+i);
          //添加点击事件
this.addEventListener("click",clickHandler); }

 第二步,执行点击事件这个函数

function clickHandler(e){
          //判断当前是不是全选框
if(this == allCheck){ for(var i = 1; i < 5;i++){ var check = document.getElementById("check"+i); check.checked = allCheck.checked; } } var bool = true; for(var i = 1; i < 5;i++){ var check = document.getElementById("check"+i); if(!check.checked) bool = false; } allCheck.checked =bool; }

效果:

多选全选框使用addEvenListener实现

原文:https://www.cnblogs.com/MySweetheart/p/12287976.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!