HTML表单复选框值无法被脚本获取，写入Google表格显示undefined

看起来你的核心问题出在HTML复选框的结构设计和Google Apps Script中未处理参数缺失这两个方面，导致表单提交时复选框的值没有正确传递，最终表格显示undefined。下面分步骤帮你修复：

1. 修复HTML复选框的结构错误 #

（1）互斥选择改用Radio按钮（Yes/No类选项） #

你当前用复选框实现Yes/No的互斥选择是错误的——复选框允许多选，而这类二选一的场景应该用type="radio"，并且同一组选项必须使用相同的name属性，不同的value对应选项值。同时要修正label的for属性，必须和对应input的id一致，否则点击label无法选中选项。

比如IDIA会议的选择应该改成：

<fieldset>
  <legend>I will attend the IDIA meeting on 24<sup>th</sup> to 25<sup>th</sup> May (Please note this is a closed meeting for IDIA members only)</legend>
  <input id="idia_yes" type="radio" name="attend_idia_meeting" value="Yes" required>
  <label for="idia_yes">Yes</label>
  <input id="idia_no" type="radio" name="attend_idia_meeting" value="No" required>
  <label for="idia_no">No</label>
</fieldset>

学习访问的选择同理修正：

<fieldset>
  <legend>I will participate in the Learning visit on 24<sup>th</sup> May</legend>
  <input id="learning_yes" type="radio" name="attend_learning_visit" value="Yes" required>
  <label for="learning_yes">Yes</label>
  <input id="learning_no" type="radio" name="attend_learning_visit" value="No" required>
  <label for="learning_no">No</label>
</fieldset>

添加required属性可以强制用户必须选择一个选项，避免参数缺失。

（2）多选选项统一name为数组格式 #

对于中转酒店日期这类允许多选的复选框，要把所有选项的name设为同一个数组名（比如transit_dates[]），这样选中的多个值会以数组形式提交：

<fieldset>
  <legend>I will take a transit hotel accommodation on:</legend>
  <br>
  <input id="checkbox1" type="checkbox" name="transit_dates[]" value="20th May 2018">
  <label for="checkbox1" style="font-size: 16px;">20<sup>th</sup> May 2018</label>
  <input id="checkbox2" type="checkbox" name="transit_dates[]" value="21st May 2018">
  <label for="checkbox2" style="font-size: 16px;">21<sup>st</sup> May 2018</label>
  <input id="checkbox3" type="checkbox" name="transit_dates[]" value="22nd May 2018">
  <label for="checkbox3" style="font-size: 16px;">22<sup>nd</sup> May 2018</label>
  <input id="checkbox4" type="checkbox" name="transit_dates[]" value="23rd May 2018">
  <label for="checkbox4" style="font-size: 16px;">23<sup>rd</sup> May 2018</label>
</fieldset>

注意：你之前有两个id="checkbox3"，这是无效的，id必须唯一，所以改成checkbox4。

2. 修复jQuery的表单序列化逻辑 #

原生jQuery并没有serializeObject()方法，你需要自己实现一个能处理数组类型字段的序列化函数，否则多选的日期无法正确传递：

// 自定义表单序列化函数，支持数组字段
function serializeObject(form) {
  var obj = {};
  var arr = form.serializeArray();
  $.each(arr, function() {
    // 处理数组类型的字段（比如多选复选框）
    if (obj[this.name]) {
      if (!obj[this.name].push) {
        obj[this.name] = [obj[this.name]];
      }
      obj[this.name].push(this.value || '');
    } else {
      obj[this.name] = this.value || '';
    }
  });
  return obj;
}

// 修改你的Ajax代码，使用自定义的serializeObject
$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var formData = serializeObject($form);
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "jsonp",
    data: formData
  }).success(function(response) {
    // 这里添加你的成功提示
    alert("提交成功！");
  }).fail(function(error) {
    // 处理错误
    alert("提交失败，请重试！");
  });
});

3. 在Google Apps Script中处理参数缺失 #

即使强制用户选择，也可能存在参数未提交的情况（比如用户绕过前端验证），所以在code.gs中要判断参数是否存在，避免出现undefined：

// 替换原有的row.push逻辑
for (i in headers) {
  if (headers[i] == "Timestamp") {
    row.push(new Date());
  } else {
    // 获取参数，若不存在则设置默认值
    var paramValue = e.parameter[headers[i]];
    // 针对不同字段设置不同默认值
    if (headers[i] === "attend_idia_meeting" || headers[i] === "attend_learning_visit") {
      row.push(paramValue || "No");
    } else if (headers[i] === "transit_dates[]") {
      // 处理多选日期，数组转成逗号分隔的字符串
      row.push(paramValue ? (Array.isArray(paramValue) ? paramValue.join(", ") : paramValue) : "None");
    } else {
      row.push(paramValue || "");
    }
  }
}

这样即使某个字段没有提交值，表格里也会显示默认值（比如"No"、"None"或空字符串），而不是undefined。

最后，确保你的Google表格表头和表单字段的name完全一致（比如attend_idia_meeting、transit_dates[]等），这样参数才能正确匹配到对应的列。

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