如何在HTML中实现"全选"复选框？

在HTML中实现"全选"复选框，可以通过JavaScript或jQuery实现。下面是两种方法的示例代码：

使用JavaScript实现：

<!DOCTYPE html>
<html>
<head>
 <title>全选复选框</title>
</head>
<body>
  <h1>全选复选框</h1>
 <input type="checkbox" id="selectAll"> 全选
  <br>
 <input type="checkbox" class="checkbox"> 选项1
  <br>
 <input type="checkbox" class="checkbox"> 选项2
  <br>
 <input type="checkbox" class="checkbox"> 选项3
  <br>
 <input type="checkbox" class="checkbox"> 选项4
  <br>

 <script>
    const selectAllCheckbox = document.querySelector("#selectAll");
    const checkboxes = document.querySelectorAll(".checkbox");
    
    selectAllCheckbox.addEventListener("change", function() {
      const isChecked = this.checked;
      checkboxes.forEach((checkbox) => {
        checkbox.checked = isChecked;
      });
    });
  </script>

</body>
</html>

使用jQuery实现：

<!DOCTYPE html>
<html>
<head>
 <title>全选复选框</title>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>全选复选框</h1>
 <input type="checkbox" id="selectAll"> 全选
  <br>
 <input type="checkbox" class="checkbox"> 选项1
  <br>
 <input type="checkbox" class="checkbox"> 选项2
  <br>
 <input type="checkbox" class="checkbox"> 选项3
  <br>
 <input type="checkbox" class="checkbox"> 选项4
  <br>
  
 <script>
    $("#selectAll").on("change", function() {
      const isChecked = this.checked;
      $(".checkbox").prop("checked", isChecked);
    });
  </script>

</body>
</html>

这两种方法都可以实现全选复选框的功能。用户在勾选“全选”复选框时，页面上所有其他复选框都将被勾选上；若取消勾选“全选”复选框，则其他复选框都会取消勾选。