2018-07-29 分类：JavaScript 作者：管理员 阅读（216）
<!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>
/*
更改其中的是否满足全选条件方法
*/
function isCheckAll(){
return [...aCheckBox].every(item=>item.checked)
}
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
感谢您让我添加个鸡腿！
支付宝
微信
上一篇：动画相关
下一篇：常用的一些网址
干洗博主分享了
评：算法相关加油，学习！ 😉
评：九宫格抽奖案列很有用的分享，感谢
评：微信公众号开发总结过来踩踩 ➡
评：博客介绍学习 :redface:
评：常用方法总结朋友 交换链接吗
评：promise用例
来访学习学习 🙂 🙂