创建一个表格,设置俩个按钮,用js实现全选择和全取消功能
时间: 2023-04-04 07:00:29 浏览: 129
好的,我可以回答这个问题。您可以使用以下代码创建一个表格,并添加两个按钮,一个用于全选,另一个用于全取消:
HTML 代码:
```
<table id="myTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
</tbody>
</table>
<button id="selectAllBtn">全选</button>
<button id="unselectAllBtn">全取消</button>
```
JavaScript 代码:
```
// 获取表格和按钮元素
const table = document.getElementById('myTable');
const selectAllBtn = document.getElementById('selectAllBtn');
const unselectAllBtn = document.getElementById('unselectAllBtn');
// 全选按钮点击事件
selectAllBtn.addEventListener('click', function() {
// 获取所有复选框元素
const checkboxes = table.querySelectorAll('tbody input[type="checkbox"]');
// 遍历所有复选框,设置为选中状态
checkboxes.forEach(function(checkbox) {
checkbox.checked = true;
});
});
// 全取消按钮点击事件
unselectAllBtn.addEventListener('click', function() {
// 获取所有复选框元素
const checkboxes = table.querySelectorAll('tbody input[type="checkbox"]');
// 遍历所有复选框,设置为未选中状态
checkboxes.forEach(function(checkbox) {
checkbox.checked = false;
});
});
```
这样,您就可以实现全选和全取消功能了。
阅读全文