1.全选和取消全选做法
让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
2.下面复选框需要全部选中,上面的全选才能选中做法。
给下面所有复选框绑定事点击事件,每次点击,都要循环查看下面所有的复选框是否选中的,如果有一个没有选中的,上面全选就不选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*对表格设置右侧和下部的边框,对单元格设置左侧和上部的边框*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
margin: 200px auto;/*居中*/
font-family: "微软雅黑";
width: 300px;
color: rgb(58, 58, 58);
border-right: 1px solid rgb(180, 180, 180);
border-bottom: 1px solid rgb(180, 180, 180);
}
thead td,thead th {
font-size: 13px;
height: 30px;
color: white;
border-left: 1px solid white;
border-top: 1px solid white;
background-color: rgb(0, 139, 204);
}
tbody td {
height: 30px;
font-size: 13px;
border-left: 1px solid rgb(180, 180, 180);
border-top: 1px solid rgb(180, 180, 180);
padding-left: 10px;
background-color: rgb(251, 251, 251);
}
td:nth-child(1) { /*让选框居中对齐*/
width: 30px;
text-align: center;
border-left: 1px solid rgb(180, 180, 180);
}
input{
display: block;
cursor: pointer;
width: 15px;
height:15px;
margin-left: 8px;
}
/*修改 input选中后的背景颜色。通过 after 伪类选择器 实现*/
input[type=checkbox] {
cursor: pointer;
position: relative;
width: 15px;
height: 15px;
font-size: 14px;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
color: #000;
width: 15px;
height: 15px;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
content: ' ';
border-radius: 3px
}
input[type=checkbox]:checked::after {
content: "✓";
color: #fff;
font-size: 12px;
font-weight: bold;
background-color:#a7a7a7;
}
.messgae .gouxuan{ /*第一个单元格也就是表单的第一个单元格*/
padding-left:0;
}
</style>
</head>
<body>
<table cellspacing='0' ;cellpadding='0' ;>
<thead >
<tr>
<td class="gouxuan"> <input type="checkbox" id="j_tbAll" ></td>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody class="messgae" id="j_tb">
<tr>
<td class="gouxuan"> <input type="checkbox" ></td>
<td>IPhone8</td>
<td>8000</td>
</tr>
<tr>
<td class="gouxuan"> <input type="checkbox" ></td>
<td>IPhone7</td>
<td>7000</td>
</tr>
<tr>
<td class="gouxuan"> <input type="checkbox" ></td>
<td>IPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td class="gouxuan"> <input type="checkbox" ></td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<Script>
//全选和不全选的做法
var j_tbAll=document.getElementById('j_tbAll');//全选按钮
var j_tbs=document.getElementById('j_tb').getElementsByTagName('input')//下面的所有选按钮
j_tbAll.onclick=function(){
//this.checked 它可以得到当前复选框的选中状态如果市true,就是选中,如果是false 就是未选中
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].checked=this.checked;
}
}
for(var i=0;i<j_tbs.length;i++){ //这个循环是给每一个input
j_tbs[i].onclick=function(){
var flag=true;
for(var i=0;i<j_tbs.length;i++){
if(!j_tbs[i].checked){ //!取反的意思
flag=false;
break;
}
}
j_tbAll.checked=flag;
}
}
</Script>
</body>
</html>