css内容部分:
<style>
.wrap{
width:300px;
margin:200px auto;
}
table{
width:300px;
}
thead{
background-color:#aaffff;
}
tr{
text-align: center;
}
</style>
HTML内容部分:
<div class="wrap">
<table border="1">
<thead>
<tr>
<th>
<input type="checkbox" id="All">
<!-- 复选框 -->
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbod id="cd">
<tr>
<td>
<input type="checkbox" class="s">
</td>
<td>HUAWEI</td>
<td>7100</td>
</tr>
<tr>
<td>
<input type="checkbox" class="s">
</td>
<td>oppo</td>
<td>4000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="s">
</td>
<td>Xiaomi</td>
<td>4500</td>
</tr>
</tbod>
</table>
</div>
js内容部分:
var All=document.getElementById('All')//全选
var cds=document.querySelectorAll(".s");
//是j_cd类名里面的input
All.οnclick=function(){
for(var i=0;i<cds.length;i++){//for循环控制每一个复选框
cds[i].checked=this.checked;//checked控制复选框中的选项
}
}
for(var i=0;i<cds.length;i++){
cds[i].οnclick=function(){
var flag=true;
for(var i=0;i<cds.length;i++){
if(!cds[i].checked){
flag=false;
break;
}
}
All.checked=flag;
}
}