更大的无线电选择范围

Question

<span>
   <img src="img/icon.png" alt="" />
   <label><input type="radio" name="" /> Label here</label>
</span>

我希望整个 都是可点击的，而不仅仅是无线电输入。我如何使用 jQuery 做到这一点？

Answer 1

好吧，最简单的解决方案是将所有内容包装在 标记内，如下所示：

<label for="foo">
    <img src="img/icon.png" alt="" />
    <input type="radio" name="" id="foo" />
</label>

当您为标签指定 for 属性时，以及相同的 id 到字段中，标签变得可点击并将激活相应的输入。

但是，如果您出于某种原因需要在 jQuery 中执行此操作，那么这应该可行：

$('span').click(function() {
    $(this).find('input').click();
    return false;
});

Answer 2

您可以在没有 jQuery 的情况下完成此操作，只需将 改为 即可：

<label for="some-id">
   <img src="img/icon.png" alt="" />
   <input type="radio" name="" id="some-id" /> Label here
</label>

Answer 3

这是一个更好的方法。

$('span').click(function() {
    $(this).find('input').attr({checked:"checked"});
});

请记住，您正在向所有范围添加点击事件。更好的办法是开设一个关于跨度的课程并参考它。

$('.myClickySpan')...

<span class='myClickySpan'>...

Answer 4

您似乎没有使用 label< 的 for 属性/a>.也许这样做会对你有所帮助

<input type="radio" name="r" id="r" />
<label for="r">
   <img src="img/icon.png" alt="" />
   Label here
</label>

Answer 5

$("span").click(function(){
  var radio = $(this).find('input:radio');
  //do whatever with the radio button
});

我相信应该这样做。