js实现全选(附完整源码)

最新推荐文章于 2025-06-22 07:47:13 发布

源代码大师

最新推荐文章于 2025-06-22 07:47:13 发布

阅读量667

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript实战教程文章标签： javascript 开发语言 ecmascript

不予转载，严禁转载，违者必纠。

本文链接：https://blog.youkuaiyun.com/it_xiangqiang/article/details/134213025

JavaScript实战教程专栏收录该内容

950 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用JavaScript实现全选功能。通过绑定事件监听器，当全选复选框状态改变时，同步所有子复选框的状态；反之，当子复选框状态变化时，根据所有子项状态更新全选复选框的选中状态。详细代码和说明见原文。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js实现全选

以下是一个简单的 JavaScript 实现全选的例子：

HTML 代码：

<input type="checkbox" id="check-all">全选
<input type="checkbox" class="checkbox-item">选项1
<input type="checkbox" class="checkbox-item">选项2
<input type="checkbox" class="checkbox-item">选项3

JavaScript 代码：

// 获取全选、子复选框元素
var checkAll = document.getElementById("check-all");
var checkboxes = document.getElementsByClassName("checkbox-item");

// 给全选复选框绑定事件
checkAll.addEventListener("change", function() {
  // 遍历所有子复选框，设置它们的选中状态与全选相同
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
});

// 给子复选框绑定事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("change", function() {
    // 判断是否所有子复选框都被选中
    var isAllChecked =