使用jQuery无法选中单选按钮，执行代码后仍显示未选中求助

既然remove()能让目标按钮消失，说明你的选择器确实定位到了元素，那问题大概率出在这几个容易忽略的点上：

1. 页面存在重复ID的元素 #

HTML规范要求ID必须唯一，但如果页面上不小心有多个id="show_slideshow_link_no"的元素，jQuery的$("#xxx")只会选中第一个匹配的元素。这时候你设置的选中状态可能给了另一个隐藏或不在当前视图的元素，而你视觉上检查的是另一个，自然会得到false的结果。

你可以在控制台执行这段代码确认：

console.log(document.querySelectorAll("#show_slideshow_link_no").length);

如果结果大于1，赶紧把重复的ID改成唯一值，或者用更精确的选择器（比如结合父容器：$(".form-group #show_slideshow_link_no")）来定位正确的元素。

2. 其他脚本覆盖了你的设置 #

有可能你设置checked之后，页面上的其他JS代码（比如表单验证逻辑、框架生命周期钩子、或者其他事件监听）又把它改回了未选中状态。

可以用debugger来排查：

$("#show_slideshow_link_no").prop('checked', true);
debugger; // 执行到这里会暂停，此时去控制台查看元素状态
console.log($("#show_slideshow_link_no").is(':checked'));

暂停时先确认元素的checked属性是true，再继续执行，看是不是后续代码把它改回去了。

3. 直接检查DOM原生属性更准确 #

有时候jQuery的:checked伪类判断可能有奇怪的兼容性问题，不如直接访问DOM元素的原生属性靠谱：

$("#show_slideshow_link_no").prop('checked', true);
console.log($("#show_slideshow_link_no")[0].checked); // 直接查看DOM的checked值

如果这里返回true，那可能是jQuery的判断逻辑偶发问题，但这种情况很少见。

4. 前端框架的虚拟DOM干扰（若使用Vue/React等） #

如果你的页面是用Vue、React这类框架构建的，手动用jQuery修改DOM状态会被框架的虚拟DOM覆盖——框架会根据自身的状态管理来渲染DOM，你手动修改的内容会被冲掉。这种情况下就别用jQuery操作了，应该修改框架的状态来控制单选按钮的选中状态。

5. 浏览器自动填充或表单重置 #

极少数情况下，浏览器的自动填充功能或者页面的表单重置操作会影响单选按钮状态。可以试试延迟执行你的代码，避开这些自动操作：

setTimeout(() => {
  $("#show_slideshow_link_no").prop('checked', true);
  console.log($("#show_slideshow_link_no")[0].checked);
}, 1000);

先从第一个情况查起，重复ID是最容易踩的坑！

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