表单提交转JSON前验证故障：空项与复选框逻辑无法共存

我懂你现在的困扰——想同时实现剔除空表单项和把勾选的复选框设为true，但这两个逻辑总是打架对吧？其实问题出在你没给不同类型的表单元素做针对性处理，统一遍历的逻辑会把复选框的状态判断和普通输入框的空值判断混在一起。

下面是我调试过的完整代码，完美对应你列出的6个步骤：

// 给你的表单绑定提交事件
document.querySelector('#your-form').addEventListener('submit', function(e) {
  // 步骤1：彻底阻止默认提交行为
  e.preventDefault();
  
  const form = this;
  const formData = {};
  
  // 步骤2&3：遍历所有表单元素，跳过非输入类控件
  Array.from(form.elements).forEach(field => {
    // 跳过按钮、禁用元素、fieldset这些不需要处理的控件
    if (field.tagName === 'BUTTON' || field.disabled || field.tagName === 'FIELDSET') return;
    
    // 步骤5：优先处理复选框
    if (field.type === 'checkbox') {
      // 如果你只想保留**已勾选**的复选框（未勾选的直接剔除），就用下面的判断
      if (field.checked) {
        formData[field.name] = true;
      }
      // 如果你需要保留所有复选框的状态（勾选为true，未勾选为false），就去掉上面的if，直接赋值：
      // formData[field.name] = field.checked;
      return; // 处理完复选框，跳过后续普通输入框的逻辑
    }
    
    // 步骤4：处理文本框、下拉框等普通输入元素，剔除空项
    const trimmedValue = field.value.trim();
    if (trimmedValue) {
      formData[field.name] = trimmedValue;
    }
  });
  
  // 步骤6：得到处理好的data，这里可以添加发送逻辑
  console.log('最终提交数据：', JSON.stringify(formData));
  // 示例：用fetch发送数据
  // fetch('/your-api-endpoint', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(formData)
  // });
});

关键逻辑说明： #

1. 优先处理复选框：把复选框的判断放在最前面，处理完直接跳过后续逻辑，避免和普通输入框的空值判断冲突——毕竟复选框的value默认是on，但我们需要的是checked的布尔状态，而不是它的value值。
2. 精准过滤空项：普通输入框先做trim()处理（避免用户输入空格被误判为有效值），只有非空时才存入数据。
3. 灵活控制复选框存储：代码里注释了两种处理方式，你可以根据需求选一种——是只存已勾选的，还是保留所有复选框的状态。

之前你尝试的变体之所以出问题，大概率是没把复选框从普通输入逻辑里剥离出来，比如用了统一的value判断，导致复选框的状态被当成空值过滤掉了。现在这个代码把两类元素的逻辑完全分开，就能同时满足你的两个需求啦。

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