表单提交时如何在控制台打印所有输入值、选中项及勾选的单选/复选框？

方法一：利用原生FormData对象（简洁高效） #

FormData可以自动收集表单里的所有有效数据，包括输入框、选中的下拉选项、勾选的复选框和单选框，无需手动区分控件类型。

代码示例： #

<form id="myForm">
  <input type="text" name="username" value="testUser">
  <input type="password" name="password" value="123456">
  <select name="gender">
    <option value="male" selected>男</option>
    <option value="female">女</option>
  </select>
  <input type="checkbox" name="hobbies" value="reading" checked>阅读
  <input type="checkbox" name="hobbies" value="running">跑步
  <input type="radio" name="status" value="active" checked>活跃
  <input type="radio" name="status" value="inactive">不活跃
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 创建FormData对象，传入当前表单
  const formData = new FormData(this);
  
  // 方法1：遍历FormData逐行打印
  console.log('表单数据（遍历输出）：');
  for (const [key, value] of formData) {
    console.log(`${key}: ${value}`);
  }
  
  // 方法2：转成普通对象后打印（更直观）
  const formObj = Object.fromEntries(formData);
  console.log('表单数据（对象格式）：', formObj);
});
</script>

说明： #

• 复选框如果有多个同name，FormData只会收集已勾选的项；如果想获取所有复选框状态，需要用方法二手动处理。
• 单选框会自动收集选中的那一项的值。

方法二：手动遍历表单元素（自定义性更强） #

如果需要更精细的控制（比如获取未勾选的复选框状态、区分控件类型），可以手动遍历表单的所有元素，根据控件类型处理：

代码示例： #

<form id="myForm">
  <!-- 同上面的表单结构 -->
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formElements = this.elements;
  const formData = {};

  // 遍历所有表单元素
  for (let i = 0; i < formElements.length; i++) {
    const element = formElements[i];
    const { name, type, value, checked, tagName } = element;
    
    // 跳过没有name属性的元素（比如按钮）
    if (!name) continue;

    // 处理文本、密码、数字、邮箱等输入框
    if (['text', 'password', 'hidden', 'number', 'email', 'textarea'].includes(type)) {
      formData[name] = value;
    }
    // 处理单选框：只记录选中的项
    else if (type === 'radio') {
      if (checked) {
        formData[name] = value;
      }
    }
    // 处理复选框：收集所有已勾选的项（数组形式）
    else if (type === 'checkbox') {
      if (!formData[name]) formData[name] = [];
      if (checked) {
        formData[name].push(value);
      }
    }
    // 处理下拉选框（select）
    else if (tagName === 'SELECT') {
      formData[name] = element.options[element.selectedIndex].value;
    }
  }

  console.log('表单数据（自定义格式）：', formData);
});
</script>

说明： #

• 复选框会以数组形式保存所有已勾选的值，未勾选的不会加入；如果需要记录未勾选状态，可以添加额外逻辑。
• 可以根据需求扩展处理更多控件类型（比如date、file等）。

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