更大的无线电选择区域

Question

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

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

Answer 1

这是一个更好的方法。

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

只要记住要添加一个click事件所有跨越。更好的办法是在跨度和参考上有一堂课。

$('.myClickySpan')... 

<span class='myClickySpan'>... 

Answer 2

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

我相信应该这样做。

Answer 3

您可以通过只使<span>的<label>，而不是做没有jQuery的：

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

Answer 4

好，最简单的解决办法是换行的一切<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 5

它看起来就像你不使用label的for属性。也许这样做会帮助你

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