效果：
e5c70d7c7f9d9f90baa3ca34713a94ae.gif
源码：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
</head>
<style>
ul{background: pink;width: 60%;marign:0 auto;padding: 0}
li{list-style: none;line-height: 40px;border: 1px solid #f4f4f4;padding-left: 15px;}
div{padding-left: 15px}
</style>
<body>
<ul>
<div><input type="checkbox" class="all123">全选</div><!-- 全选按钮 -->
<li><input type="checkbox" class="inpChild">商品1</li>
<li><input type="checkbox" class="inpChild">商品2</li>
<li><input type="checkbox" class="inpChild">商品3</li>
<li><input type="checkbox" class="inpChild">商品4</li>
<li><input type="checkbox" class="inpChild">商品5</li>
</ul>
<script>
window.onload=function(){//页面执行完毕后触发此事件。
var allBtn=document.getElementsByClassName("all123")[0];//全选按钮
var inp=document.getElementsByClassName("inpChild");//所有标签
// 事件
allBtn.onclick=function(){
for(var i=0;i<inp.length;i++){
inp[i].checked=this.checked;
}
}
for(var j=0;j<inp.length;j++){
inp[j].onclick=function(){
var bool=true;
for(var w=0;w<inp.length;w++){
if(inp[w].checked==false){bool=false}//
}
allBtn.checked=bool;
}
}
}
</script>
</body>
</html>
网友评论