利用checked实现购物车全选功能

原创 zhongxiaoyou 随笔 javascript 245阅读 2018-01-12 21:09:31 举报

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
全选<input type="checkbox" class="all"><br>
<input type="checkbox" class="item">
<input type="checkbox" class="item">
<input type="checkbox" class="item">
<input type="checkbox" class="item">
<script>
var cbAll=document.querySelector(".all");
var items=document.querySelectorAll(".item");
var falseCount = 4;//没有被选中的个数
cbAll.onchange=function () { //监听全选框
for(let i=0;i<items.length;i++){
items[i].checked=cbAll.checked;
}
/ if(falseCount=cbAll.checked){
falseCount=0; //如果全部被选中,则falseCount=0
}else {
falseCount=4;//否则falseCount=4
}
/
falseCount=cbAll.checked ? 0: 4;
}

//监听其他框
for(let i=0;i<items.length;i++){
    items[i].onchange=function () {
        !items[i].checked ? falseCount++ : falseCount--;
        cbAll.checked=falseCount==0 ? true : false;
    }
}

</script>
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复