提交表单后如何获取并显示所有选中的checkbox值

原有逻辑使用else if分支做选中状态判断，该分支为互斥逻辑：只要命中第一个符合条件的判断分支，就不会执行后续分支代码，因此无论勾选多少个复选框，最终都只能拿到第一个匹配到的选中值。

直接替换原有getCheckboxValue()函数即可：

function getCheckboxValue(e) {
  // 阻止submit按钮默认的表单提交刷新行为
  e.preventDefault();
  // 获取所有name属性为chk[]的复选框
  const chkList = document.querySelectorAll('input[name="chk[]"]');
  const selected = [];
  // 遍历收集所有选中项的value
  chkList.forEach(item => {
    if (item.checked) selected.push(item.value);
  });
  // 将结果写入指定h4标签
  const resultBox = document.getElementById('result_checkbox');
  resultBox.textContent = selected.length 
    ? `You have selected ${selected.join(',')}`
    : 'You have selected no items';
}

注意：如果你的onclick是直接写在标签属性上的，比如<button onclick="getCheckboxValue(event)">，要记得把event对象传入函数，不然preventDefault会报错。

• 不再使用逐一枚举+互斥判断的写法，通过选择器批量获取所有目标复选框，后续增减复选框选项也不需要修改JS逻辑
• 用数组临时存储所有选中值，遍历过程中不会中断判断，能完整收集多选项结果
• 调用数组join(',')方法自动拼接逗号分隔的字符串，不会出现首尾多逗号、拼接格式错误的问题，勾选INT、MV时将直接输出You have selected INT,MV，和预期效果一致。

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