全选单选功能ES5实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<ul>
<li>单选项<input type="checkbox" class="checkbox-item"></li>
<li>单选项<input type="checkbox" class="checkbox-item"></li>
<li>单选项<input type="checkbox" class="checkbox-item"></li>
<li>单选项<input type="checkbox" class="checkbox-item"></li>
<li>单选项<input type="checkbox" class="checkbox-item"></li>
<li>单选项<input type="checkbox" class="checkbox-item"></li>
<li>单选项<input type="checkbox" class="checkbox-item"></li>
<li>单选项<input type="checkbox" class="checkbox-item"></li>
<li>全选<input type="checkbox" class="checkbox-all"></li>
</ul>
</body>
<script>
//单选项
let aCheckBox=document.querySelectorAll('.checkbox-item');
//全选
let checkAll=document.querySelector('.checkbox-all');
//是否满足全选条件
function isCheckAll(){
let resArr=[];
aCheckBox.forEach(function(item,index){
if(!item.checked){
resArr.push(false)
}
})
return resArr.length===0
}
//单选项点击事件
for(var i=0;i<aCheckBox.length;i++){
aCheckBox[i].onclick=function(){
if(isCheckAll()){
checkAll.checked=true
}else{
checkAll.checked=false
}
}
}
//全选项点击事件
checkAll.onclick=function(){
if(this.checked){
aCheckBox.forEach(function(item,index){
item.checked=true
})
}else{
aCheckBox.forEach(function(item,index){
item.checked=false
})
}
}
</script>
</html>
全选单选功能ES6实现
/*
更改其中的是否满足全选条件方法
*/
function isCheckAll(){
return [...aCheckBox].every(item=>item.checked)
}
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
来访学习学习 🙂 🙂