用js对一个表格实现全选和全取消功能
时间: 2023-04-04 18:00:23 浏览: 188
可以使用以下代码实现:
```javascript
// 获取全选按钮和所有复选框
var selectAll = document.getElementById("selectAll");
var checkboxes = document.querySelectorAll("input[type='checkbox']");
// 给全选按钮添加点击事件
selectAll.addEventListener("click", function() {
// 遍历所有复选框,设置它们的选中状态与全选按钮相同
for (var i = ; i < checkboxes.length; i++) {
checkboxes[i].checked = selectAll.checked;
}
});
// 给每个复选框添加点击事件
for (var i = ; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("click", function() {
// 如果有任何一个复选框未选中,则取消全选按钮的选中状态
for (var j = ; j < checkboxes.length; j++) {
if (!checkboxes[j].checked) {
selectAll.checked = false;
return;
}
}
// 如果所有复选框都选中了,则设置全选按钮为选中状态
selectAll.checked = true;
});
}
```