如何实现复选框选中值全输出、单选框选中值正确打印到控制台？

我来帮你搞定这个问题～你的代码目前存在两个核心问题：

• document.querySelector()只会返回匹配选择器的第一个元素，所以复选框只能拿到第一个选项的值，单选框也不管是否选中都取第一个的value；
• 表单提交默认会触发页面刷新，导致控制台日志一闪而过，根本来不及查看。

修改后的完整代码 #

JavaScript 部分

function newForm(event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  // 获取所有选中的group1复选框，将它们的value收集为数组
  const selectedCheckboxes = document.querySelectorAll('input[type=checkbox][name=group1]:checked');
  const edu_level = Array.from(selectedCheckboxes).map(box => box.value);
  
  // 获取选中的group2单选框，处理未选中的边界情况
  const selectedRadio = document.querySelector('input[type=radio][name=group2]:checked');
  const prof = selectedRadio ? selectedRadio.value : '未选择学历';
  
  const pro_other = document.getElementById('pro_other').value;
  
  const data = {
    "prof": prof,
    "edu_level": edu_level,
    "pro_other": pro_other
  };
  
  console.log(data);
}

HTML 按钮调整

把原按钮代码改成这样，传递事件对象用于阻止默认行为：

<button type="submit" name="action" onclick="newForm(event)">Submit </button>

关键修改说明 #

1. 复选框处理：
   • 用document.querySelectorAll('input[type=checkbox][name=group1]:checked')精准定位所有被选中的复选框；
   • 通过Array.from()把NodeList转为数组，再用map()提取每个选中项的value，最终得到包含所有选中值的数组。
2. 单选框处理：
   • 在选择器中添加:checked伪类，直接获取被选中的单选框；
   • 增加判断逻辑，如果用户未选择任何单选框，返回友好提示文本，避免null报错。
3. 页面刷新问题：
   • 给函数传入event参数，调用event.preventDefault()阻止表单默认提交刷新，这样就能在控制台稳定看到输出结果了。

现在提交表单时，控制台会正确输出所有选中的复选框值，以及单选框的选中值啦！

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