jQuery AJAX 提交表单获取 radio 失败原因及解决方法

本文揭示了一个在 jQuery AJAX 表单提交中极易被忽视却影响深远的问题：因违反 HTML 规范为多个 radio 按钮设置重复 ID（如 id="choice"），导致 `$("#choice").val()` 始终返回首个选项值，造成数据错乱；文章直击根源，提供基于 `name` 属性与 `:checked` 伪类的标准化取值方案，并附上开箱即用的修复代码、严谨的空值校验、安全的 DOM 更新实践以及可选的实时响应进阶技巧，帮你彻底告别“永远选第一个”的诡异 Bug，让表单数据准确无误地抵达后端。

本文详解 jQuery 中因重复 ID 导致 $("#choice").val() 始终返回首个 radio 值的问题，提供基于 name + :checked 的健壮取值方案，并附可直接运行的修复代码与关键注意事项。

本文详解 jQuery 中因重复 ID 导致 `$("#choice").val()` 始终返回首个 radio 值的问题，提供基于 name + :checked 的健壮取值方案，并附可直接运行的修复代码与关键注意事项。

在使用 jQuery AJAX 处理表单（尤其是多组单选按钮）时，一个常见却隐蔽的错误是：对具有相同 id 的多个 <input type="radio"> 元素使用 $("#id").val()。HTML 规范明确要求 id 必须唯一，而你的表单中所有 bet 和 choice radio 按钮均使用了重复的 id="bet" 和 id="choice"：

<input name="bet" type="radio" value="1000" id="bet" checked/>
<input name="bet" type="radio" value="10000" id="bet" />
<!-- ⚠️ 多个元素共享同一 id，违反 HTML 标准 -->

当 jQuery 执行 $("#bet").val() 时，它仅匹配 DOM 中第一个匹配该 ID 的元素（即 value="1000"），同理 $("#choice").val() 总是返回第一个 value="1" 的选项——这正是你观察到“Choice 始终为 1、Bet 始终为 1000”的根本原因。

✅ 正确解法：放弃重复 ID，改用 name 属性配合 :checked 伪类选择器
name 属性天然用于分组单选按钮，:checked 精确筛选当前被选中的项，语义清晰且完全符合规范：

$(document).ready(function () {
  $("form#game").submit(function (event) {
    // ✅ 正确：通过 name 分组 + :checked 获取用户实际选择的值
    var formData = {
      choice: $("input[name='choice']:checked").val(),
      bet:    $("input[name='bet']:checked").val()
    };

    // 防御性检查：确保有选项被选中
    if (!formData.choice || !formData.bet) {
      alert("请选择投注金额和预测数字！");
      event.preventDefault();
      return;
    }

    $.ajax({
      type: "POST",
      url: "inc/roll.php",
      data: formData,
      dataType: "json",
      encode: true
    }).done(function (data) {
      let output = `Status: ${data.status}<br />Results: ${data.results}<br />Choice: ${data.choice}<br />Bet: ${data.bet}`;
      if (data.status === "winner") {
        output += `<br />You won: ${data.prize}`;
      } else {
        output += `<br />You lost: ${data.bet}`;
      }
      $("#results").html(output); // 使用 jQuery 替代原生 innerHTML，更安全
    }).fail(function (jqXHR, textStatus, errorThrown) {
      console.error("AJAX 请求失败:", textStatus, errorThrown);
      $("#results").html("系统错误，请稍后重试。");
    });

    event.preventDefault();
  });
});

? 关键注意事项：

• 永远不要给多个元素设置相同 id：这是 HTML 硬性规范，不仅影响 jQuery，还会破坏可访问性（如屏幕阅读器）和 CSS 样式定位。
• name 是 radio/checkbox 的核心标识：浏览器原生表单提交即依赖 name，AJAX 模拟时也应沿用此逻辑。
• 添加空值校验：用户可能未做选择，$("input:checked").val() 在无选中项时返回 undefined，需主动拦截避免发送无效请求。
• 使用 $("#results").html(...) 替代 document.getElementById(...).innerHTML：保持 jQuery 风格一致性，且自动处理 XSS 风险（虽本例数据来自可信后端，但属良好实践）。

? 进阶建议：若需动态响应选项变化（如实时显示所选 bet），可监听 change 事件：

$("input[name='bet'], input[name='choice']").on("change", function() {
  console.log("当前选择：", 
    $("input[name='bet']:checked").val(), 
    $("input[name='choice']:checked").val()
  );
});

遵循上述修正后，AJAX 将准确传递用户真实选择的 bet 和 choice 值，PHP 后端即可正确执行逻辑并返回预期结果。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《jQuery AJAX 提交表单获取 radio 失败原因及解决方法》文章吧，也可关注golang学习网公众号了解相关技术文章。