如何判断名称为checker[]的复选框数组是否仍有勾选状态？

嘿，我来帮你搞定这个复选框的问题～你的现有代码有几个小问题，咱们一步步调整就能实现需求：

先说说你原代码的问题 #

1. 访问表单元素时，checker[]的写法不对——表单元素的name里的[]是给后端识别数组用的，JS里访问的时候直接写checker就可以拿到整个复选框集合。
2. 直接判断checker[].checked是语法错误，而且就算写法正确，也不能直接给整个元素集合判断checked属性，必须逐个检查每个复选框的状态。

解决方案（推荐用jQuery，你已经引入了） #

方式1：分离HTML和JS（最佳实践）

先把HTML里的onclick去掉，让结构和行为分开：

<form name="theForm">
  <input type="checkbox" name="checker[]" value="1">
  <input type="checkbox" name="checker[]" value="2">
  <!-- 这里放更多的复选框 -->
</form>

然后用jQuery绑定点击事件，判断勾选状态：

$(document).ready(function() {
  // 给所有name为checker[]的复选框绑定点击事件
  $('input[name="checker[]"]').on('click', function() {
    // 统计当前被勾选的checker[]复选框数量
    var checkedNum = $('input[name="checker[]"]:checked').length;
    // 如果数量为0，说明没有任何复选框被勾选了
    if (checkedNum === 0) {
      alert('none checked');
    }
  });
});

方式2：保留HTML里的onclick

如果你不想改HTML结构，直接修改doStuff函数就行：

function doStuff() {
  // 筛选出被勾选的checker[]复选框，获取数量
  var checkedNum = $('input[name="checker[]"]:checked').length;
  if (checkedNum === 0) {
    alert('none checked');
  }
}

不用jQuery的原生JS方案 #

要是你想试试原生JS实现，也可以这么写：

function doStuff() {
  // 获取所有name为checker的复选框集合（注意这里不用写[]）
  var checkboxes = document.forms.theForm.elements.checker;
  var hasChecked = false;
  
  // 遍历所有复选框，检查是否有被勾选的
  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      hasChecked = true;
      break; // 找到一个勾选的就停止遍历，提升效率
    }
  }
  
  // 如果没有任何勾选的，弹出提示
  if (!hasChecked) {
    alert('none checked');
  }
}

内容的提问来源于stack exchange，提问作者Daniel Williams