表单中单选按钮点击无法选中？问题原因排查及解决

你的radio按钮无法选中，核心问题出在HTML代码的两处错误上：

1. ID属性重复且与label关联失效 #

• 两个radio输入框使用了相同的id="gender"，但ID在整个页面中必须唯一，浏览器无法正确识别重复ID的元素，会导致选中逻辑异常。
• label标签的for属性值为radio-6，但对应的input元素ID是gender，两者不匹配，导致点击label时无法触发radio的选中状态，进一步影响交互体验。

修复后的代码 #

修正后的HTML #

<!--Radio Select -->
<div class="select-radio6">
    <div class="radio">
        <input id="gender-male" name="gender" type="radio" value="male">
        <label for="gender-male" class="radio-label">Male</label>
    </div>
    <div class="radio">
        <input id="gender-female" name="gender" type="radio" value="female">
        <label for="gender-female" class="radio-label">Female</label>
    </div>
</div>

这里给每个radio设置了唯一ID，同时让label的for属性与对应radio的ID匹配，既解决了ID重复问题，也让label能正确触发radio的选中操作。

JS代码无需修改（需确认jQuery已引入） #

你的jQuery逻辑本身没有问题，只要HTML修复完成，点击按钮就能正常获取选中的radio值。另外要确保页面已经正确引入了jQuery库，否则事件绑定会失效。

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