多选全选框使用addEvenListener实现
第一步,既然是全选和多选,那么一定需要鼠标去点击,那么我就先分别获取它们的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; }
效果: