라디오 선택을위한 더 큰 영역

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"}); 
}); 

그냥 당신이 모든에 걸쳐 에 클릭 이벤트를 추가하는 것을 명심하십시오. 범위에 수업을 가지고 그것을 참조하는 것이 더 낫습니다.

$('.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를에 할 필요가있는 경우

그러나, 이것은 작동합니다 : 당신이 label의 for 속성을 사용하지 않는 것처럼

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

Answer 5

것 같습니다. 아마도 도움이 될 것입니다.

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