更大的无线电选择区域

Question

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

我希望整个<span>可以点击，而不仅仅是收音机输入。我如何用jQuery做到这一点？

Answer 1

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

<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

只需将<span>改为<label>，就可以在没有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

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

我相信应该这样做。

Answer 5

您好像没有使用label的for属性。也许这样做会有所帮助

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