2018-07-29 分类：JavaScript 作者：管理员 阅读（871）
<!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)
}
「三年博客，如果觉得我的文章对您有用，请帮助本站成长」
感谢您让我添加个鸡腿！
支付宝
微信
上一篇：动画相关
下一篇：常用的一些网址
移动端 vue项目的话，可以参考 https://juejin.im/post/5e6c28...
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法选择后的，你所选择的对象返回给你了的，就是来获取 选择的 id 去请求，这样的需要考虑到了的
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法选择后的数据可以回显吗？实际使用中（如编辑页面）要用到。
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法能用在vue上么？
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法加油，学习！ 😉
评：九宫格抽奖案列很有用的分享，感谢
评：微信公众号开发总结
来访学习学习 🙂 🙂