<style>
table {
width: 1000px;
border-collapse: 0;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<input type="checkbox" name="selected" id="" />
</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">
<input type="checkbox" name="selected" id="" />
</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">
<input type="checkbox" name="selected" id="" />
</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">
<input type="checkbox" name="selected" id="" />
</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">
<input type="checkbox" name="selected" id="" value="12" />
</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<button>全选</button>
<br />
<button>不选</button>
<br />
<button>反选</button>
<br />
<script>
let allbtns = document.querySelectorAll("button");
let allcheckboxs = document.querySelectorAll('input[type="checkbox"]');
console.log(allcheckboxs);
allbtns[0].onclick = function () {
[...allcheckboxs].forEach((a) => {
a.checked = true;
});
};
allbtns[1].onclick = function () {
[...allcheckboxs].forEach((a) => {
a.checked = false;
});
};
allbtns[2].onclick = function () {
[...allcheckboxs].forEach((a) => {
a.checked = a.checked == false ? true : false;
});
};
</script>
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
