本文详解 jQuery 中因重复 ID 导致 $("#choice").val() 始终返回首个 radio 值的问题，提供基于 name + :checked 的健壮取值方案，并附可直接运行的修复代码与关键注意事项。
本文详解 jquery 中因重复 id 导致 `$("#choice").val()` 始终返回首个 radio 值的问题，提供基于 name + :checked 的健壮取值方案，并附可直接运行的修复代码与关键注意事项。
在使用 jQuery AJAX 处理表单（尤其是多组单选按钮）时，一个常见却隐蔽的错误是：对具有相同 id 的多个 元素使用 $("#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 后端即可正确执行逻辑并返回预期结果。
