选中全选框
程序员文章站
2022-07-13 23:05:09
...
这里是HTML代码
<table>
<tr>
<th>
<input type="checkbox" name="" id="checkAll"/>全选/全不选
</th>
<th>菜名</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>红烧肉</td>
<td>隆*脚饭</td>
<td>¥200</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>香酥排骨</td>
<td>隆*脚饭</td>
<td>¥998</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>北京烤鸭</td>
<td>隆*脚饭</td>
<td>¥88</td>
</tr>
</table>
这里是css代码
*{
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
这里是js代码
var checkAll = document.getElementById("checkAll");
var checks = document.getElementsByName("check");
checkAll.onclick=function(){
var statu = this.checked;
for(var i =0;i<checks.length;i++){
checks[i].checked=statu;
}
}
for(var i=0;i<checks.length;i++){
checks[i].onclick=function(){
var flag = true;
for(var j=0;j<checks.length;j++){
if(checks[j].checked==false){
flag=false;
break;
}
}
if(flag){
checkAll.checked=true;
}else{
checkAll.checked=false;
}
}
}