更大的無線電選擇區域

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>