JavaScript中高效判断所有复选框选中状态的教程

// 获取页面上所有类型为checkbox的input元素
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
// 注意：NodeList不是真正的数组，但可以使用Array.from()或扩展运算符将其转换为数组
const checkboxArray = Array.from(allCheckboxes);

/**
 * 检查所有复选框是否全部选中
 * @returns {boolean} 如果所有复选框都选中则返回true，否则返回false
 */
const areAllCheckboxesChecked = () => {
  const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
  // 将NodeList转换为数组，以便使用Array方法
  const checkboxArray = Array.from(allCheckboxes);

  // 使用some()方法检查是否存在任何一个未选中的复选框
  // 如果some()返回true（表示存在未选中的），则取反得到false（表示并非所有都选中）
  // 如果some()返回false（表示所有都选中），则取反得到true（表示所有都选中）
  const someAreUnchecked = checkboxArray.some(box => !box.checked);
  return !someAreUnchecked;
};

// 示例用法
// 假设页面上有一些复选框
/*
<label><input type="checkbox"> 复选框 1</label><br>
<label><input type="checkbox"> 复选框 2</label><br>
<label><input type="checkbox"> 复选框 3</label>
<p><button onclick="console.log('所有复选框都选中吗？', areAllCheckboxesChecked())">检查所有复选框</button></p>
*/

// 在实际应用中，您可以在事件监听器中调用此函数
// 例如，在一个按钮点击事件中：
// document.getElementById('myButton').addEventListener('click', () => {
//   if (areAllCheckboxesChecked()) {
//     console.log("所有复选框都已选中。");
//   } else {
//     console.log("存在未选中的复选框。");
//   }
// });

/**
 * 检查所有复选框是否全部选中（通过计数）
 * @returns {boolean} 如果所有复选框都选中则返回true，否则返回false
 */
const checkAllCheckboxesByCount = () => {
  const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
  const totalCheckboxes = allCheckboxes.length;

  // 使用filter()方法筛选出所有已选中的复选框
  const checkedBoxes = Array.from(allCheckboxes).filter(box => box.checked);
  const checkedCount = checkedBoxes.length;

  // 如果总数大于0且所有复选框都被选中，则返回true
  return totalCheckboxes > 0 && totalCheckboxes === checkedCount;
};

// 示例用法
// if (checkAllCheckboxesByCount()) {
//   console.log("所有复选框都已选中。");
// } else {
//   console.log("存在未选中的复选框。");
// }

document.addEventListener('DOMContentLoaded', () => {
  // 在DOM完全加载后，再获取元素并进行操作
  const initialAllChecked = areAllCheckboxesChecked();
  console.log("页面加载完成时：所有复选框都选中吗？", initialAllChecked);

  // 假设有一个生成图表的按钮
  const generateButton = document.getElementById('generate');
  if (generateButton) {
    generateButton.addEventListener('click', () => {
      const currentStatus = areAllCheckboxesChecked(); // 动态获取最新状态
      console.log("点击生成按钮时：所有复选框都选中吗？", currentStatus);
      // ... 根据 currentStatus 执行其他逻辑，例如禁用/启用按钮
    });
  }
});

<!-- 正确的写法 -->
<input type="checkbox" name="cl" class="device cl" id="PRM2143-PRM2142" onchange="...">

<!-- 错误的写法（可能导致只有最后一个class生效或行为不一致） -->
<!-- <input type="checkbox" name="cl" class="device" id="PRM2143-PRM2142" class="cl" onchange="..."> -->