<!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>全选与取消全选</title>
</head>
<body>
<style>
.container {
margin: 200px auto;
width: 600px;
border: 3px solid green;
padding: 10px;
text-align: center;
}
table {
width: 600px;
background-color: rgb(216, 193, 230);
}
table:hover {
cursor: default;
}
tr {
align-content: center;
}
thead {
background-color: rgb(105, 91, 185);
}
td {
border: 1px solid rgba(70, 124, 70, 0.438);
align-content: center;
}
tbody>tr:hover {
background-color: rgb(161, 156, 226);
}
</style>
<div class="container">
<table cellspacing="0" cellpadding="0" text-align="center">
<thead>
<tr>
<td text-align="center">
<input type="checkbox" name="" id="checkbox_all" value="ALL">
</td>
<td text-align="center">HEAD</td>
<td text-align="center">Head</td>
<td text-align="center">HEAD</td>
</tr>
</thead>
<tbody id="tbody_Id">
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
<td>td1</td>
<td>td2</td>
<td>td3</td>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var all_Btn = document.getElementById("checkbox_all");
var per_Btn = document.getElementById("tbody_Id").getElementsByTagName('input');
all_Btn.onclick = function () {
for (var i = 0; i < per_Btn.length; i++) {
per_Btn[i].checked = this.checked;
}
}
for (var i = 0; i < per_Btn.length; i++) {
per_Btn[i].onclick = function () {
var flag = true;
for (var i = 0; i < per_Btn.length; i++){
if (!per_Btn[i].checked) {
flag = false;
}
}
all_Btn.checked = flag;
}
}
</script>
</body>
</html>
|