2018-07-29 分类：JavaScript 作者：管理员 阅读（1747）
<!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)
}
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
感谢您让我添加个鸡腿！
支付宝
微信
上一篇：动画相关
下一篇：常用的一些网址
Thanks.
评：你渴望力量吗？来，送你唐诗三百首！你好
评：vue如何不通过vuex进行祖孙值的透传一个搬砖仔而已@_@
评：交换数组里任一两个的位置专业程序员？
评：交换数组里任一两个的位置移动端 vue项目的话，可以参考 https://juejin.im/post/5e6c28...
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法选择后的，你所选择的对象返回给你了的，就是来获取 选择的 id 去请求，这样的需要考虑到了的
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法
来访学习学习 🙂 🙂