如何使用jQuery实现点击li元素时选中其内部的单选按钮？

嘿，我一眼就看出你的问题所在了——你当前的jQuery代码逻辑跑偏了：点击任意Li时，会把所有符合选择器的单选按钮都设为选中状态，这显然不是你想要的效果（毕竟同name的单选按钮只能选一个，浏览器最后只会保留最后一个被设置的选项）。

问题根源 #

你的原代码：

$(".skin-complexion-list > li").click(function() { 
  $(".skin-complexion-list > li > img + input[type=radio]").prop("checked", true); 
});

这里的选择器.skin-complexion-list > li > img + input[type=radio]会匹配所有Li里的单选按钮，所以点击任意Li都会把所有单选框设为checked，完全不符合“点哪个Li选哪个框”的需求。

修正后的代码 #

我们需要只操作当前点击的Li内部的单选按钮，用$(this)就能拿到触发事件的当前Li元素，然后在它内部查找目标单选框即可：

$(".skin-complexion-list > li").click(function() {
  // 仅选中当前点击的Li里的单选按钮
  $(this).find('input[type=radio]').prop("checked", true);
});

完整可运行代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="skin-complexion-list">
  <li>
    <img src="{{ 'icon-fair.png' | asset_url }}"> Fair
    <input type="radio" name="skincomplexion" value="Fair" />
  </li>
  <li>
    <img src="{{ 'icon-medium.png' | asset_url }}"> Medium
    <input type="radio" name="skincomplexion" value="Medium" />
  </li>
  <li>
    <img src="{{ 'icon-dark.png' | asset_url }}"> Dark
    <input type="radio" name="skincomplexion" value="Dark" />
  </li>
</ul>

<script>
$(".skin-complexion-list > li").click(function() {
  $(this).find('input[type=radio]').prop("checked", true);
});
</script>

可选优化（让体验更流畅） #

如果用户直接点击单选按钮本身，现在会触发两次选中逻辑（单选按钮自身的点击事件+Li的点击事件），虽然不影响功能，但可以阻止冒泡让逻辑更干净：

$(".skin-complexion-list > li input[type=radio]").click(function(e) {
  e.stopPropagation();
});

加了这段代码后，用户点击单选按钮时就不会再触发Li的点击事件了，交互体验更自然。

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