JavaScript实现全选和全不选功能示例
在web开发中,实现表格全选和全不选的功能是一个常见的需求。本文将介绍如何使用JavaScript实现这一功能。
HTML代码如下:
姓名 | 年龄 | 性别 | |
---|---|---|---|
张三 | 25 | 男 | |
李四 | 30 | 男 | |
王五 | 28 | 女 |
JavaScript代码如下:
var checkAll = document.getElementById('checkAll');
var checkboxes = document.getElementsByClassName('checkbox');
checkAll.onclick = function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checkAll.checked;
}
};
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() {
var checkedCount = 0;
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
checkedCount++;
}
}
checkAll.checked = checkedCount === checkboxes.length;
};
}
用户评论