Question

我正在显示一个列表，每个li里面都有一个单选按钮。我想在点击父li时选择里面的单选按钮。

列表代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

上面的jquery代码不起作用。任何帮助表示赞赏。感谢

Answer 1

您应该可以使用

选择嵌套广播

$(this).find('input:radio')

参考。 http://api.jquery.com/radio-selector/

Answer 2

在大多数情况下，我更喜欢Taplar的jQuery解决方案。如果WCAG 2.0 accessibility是您网站的一个因素，我建议您使用HTML non-js解决方案。只需为您的标签添加一个'for'属性，并为您的单选按钮输入添加一个类似且唯一的'id'属性。这也有助于屏幕阅读器了解您的单选按钮的含义。

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

Answer 3

你必须使用＆＃39;这个＆＃39;匿名函数中的关键字。

{{1}}

$（this）将引用单击的li元素。并且find函数将在单击的元素中选择输入：radio。

使用jQuery点击li时如何选择单选按钮？

3 个答案: