js表单全选和取消案例

以下是一个JavaScript实现表单全选和取消的案例：

// 获取全选复选框元素
var selectAllCheckbox = document.getElementById("selectAll");

// 获取所有子复选框元素
var checkboxes = document.querySelectorAll("input[type='checkbox']");

// 给全选复选框绑定点击事件
selectAllCheckbox.addEventListener("click", function() {
  // 遍历所有子复选框
  for (var i = 0; i < checkboxes.length; i++) {
    // 设置子复选框的选中状态与全选复选框一致
    checkboxes[i].checked = selectAllCheckbox.checked;
  }
});

// 给子复选框绑定点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("click", function() {
    // 检查是否所有子复选框都被选中
    var allChecked = true;
    for (var j = 0; j < checkboxes.length; j++) {
      if (!checkboxes[j].checked) {
        allChecked = false;
        break;
      }
    }
    // 设置全选复选框的选中状态
    selectAllCheckbox.checked = allChecked;
  });
}