1. 首页
  2. 课程学习
  3. Java
  4. JavaScript实现全选和全不选功能示例

JavaScript实现全选和全不选功能示例

上传者: 2023-03-11 03:16:05上传 ZIP文件 2.89KB 热度 22次
在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;

};

}

用户评论