表单复选框值未全显示：JSON序列化仅返回Grapefruit求助

将表单序列化为JSON时，多数字段输出正常，但「选择你最爱的水果」复选框区域存在异常——无论勾选哪项，JSON结果始终仅显示"Grapefruit"，其他已勾选选项未出现在输出中。输出示例：

{"name":"Micky Mouse","check":"yes","select":"junkfood","fruit":"Grapefruit","message":"Hi"}

核心问题分析 #

1. 复选框覆盖问题：你的toJSONString函数遍历表单元素时，所有同名fruit复选框会被逐个赋值到obj[name]，后面的元素会直接覆盖前面的。由于Grapefruit是最后一个复选框，最终只会保留它的值，完全忽略勾选状态。
2. 无效选择器：querySelectorAll中的checkbox是无效选择器，无法正确选中复选框元素。
3. 验证函数失效：validate函数中使用document.myForm.fruit获取元素，但你的表单id是foodie且未设置name="myForm"，导致该函数根本无法正常执行。

修复方案 #

修正后的JavaScript代码 #

function validate() {
  var checkBoxVal = [];
  // 修正表单元素获取方式
  var showChecked = document.getElementById("foodie").elements.fruit;
  var chkboxLength = showChecked.length;
  for (var i = 0; i < chkboxLength; i++) {
    if (showChecked[i].checked) {
      checkBoxVal.push(showChecked[i].value);
    }
  }
  return checkBoxVal.length > 0;
}


(function() {
  function toJSONString(form) {
    var obj = {};
    // 修正表单控件选择器
    var elements = form.querySelectorAll("input, select, textarea");
    for (var i = 0; i < elements.length; ++i) {
      var element = elements[i];
      var name = element.name;
      var value = element.value;

      if (!name) continue;

      // 处理复选框逻辑：仅收集勾选的选项，同名选项存入数组
      if (element.type === 'checkbox') {
        if (!element.checked) continue;
        obj[name] = Array.isArray(obj[name]) ? [...obj[name], value] : [value];
      } else {
        // 其他表单控件直接赋值
        obj[name] = value;
      }
    }

    return JSON.stringify(obj);
  }

  document.addEventListener("DOMContentLoaded", function() {
    // 修正表单id匹配
    var form = document.getElementById("foodie");
    var output = document.getElementById("output");
    form.addEventListener("submit", function(e) {
      e.preventDefault();
      if (!validate()) {
        alert("请至少选择一种水果");
        return;
      }
      var json = toJSONString(this);
      output.innerHTML = json;
    }, false);
  });
})();

修正后的HTML代码（仅保留关键部分，其余不变） #

<form id="foodie" action="#" method="post">
  <!-- 其他表单元素不变 -->
  <div id="favFruit" onblur="return(validate());">
    <h4>Choose Your Favorite Fruit</h4>
    <input type="checkbox" name="fruit" value="Cherries">Cherries
    <input type="checkbox" name="fruit" value="Apples">Apples
    <input type="checkbox" name="fruit" value="Berries">Berries
    <input type="checkbox" name="fruit" value="Grapes">Grapes
    <input type="checkbox" name="fruit" value="Pears">Pears
    <input type="checkbox" name="fruit" value="Grapefruit">Grapefruit
  </div>
</form>

关键修复点 #

1. 复选框逻辑重构：判断元素类型为复选框时，仅收集已勾选的选项，且将同名复选框的值存入数组，避免覆盖。
2. 表单选择器修正：使用表单idfoodie正确获取元素，替换无效的document.myForm。
3. 验证函数修复：简化验证逻辑，确保至少选择一种水果。
4. 无效选择器移除：删除querySelectorAll中的无效checkbox选择器，改用类型判断筛选复选框。

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