이미지로 라디오 바꾸기

Question

라디오 버튼을 이미지로 바꾸려면 this 코드가 있지만 라디오 그룹 하나에서만 작동합니다. 누구든지 다른 코드를 가지고 있습니까? 내가 원하는 것 : Fiddle.

//Group 1 
<input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label> 
<input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label> 
<input type="radio" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label> 
//Group 2 
<input type="radio" name="second" id="sd" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label> 
<input type="radio" name="second" id="sc" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label> 

누구든지 자바 스크립트 코드를 제공 할 수 있습니까?

Answer 1

첫 번째 것은 두 번째 그룹의 라디오에 대해 id 속성을 변경했지만 레이블에 for 속성이 첫 번째 그룹의 요소 중 하나의 id로 설정되어 있다는 것입니다. CSS로 라디오를 숨겨 봤기 때문에 이것을 볼 수는 없지만 두 번째 그룹의 레이블을 클릭하면 첫 번째 그룹의 라디오가 선택된 것으로 표시됩니다. 오랜 시간 동안 필요한 모든 것을 업데이트하지 않고 복사하여 붙여 넣기로 인해 발생하는 버그를 찾기 때문에 코드를주의해서 복사하고 붙여 넣는 것을 잊지 마십시오.

두 번째 것은 - siblings() 메서드는 요소의 모든 형제를 반환하므로 현재의 HTML 코드에서 모두 개의 라디오가 형제임을 알 수 있습니다. 예를 들어, div과 같이 각 그룹을 래핑 할 것을 제안합니다. 그래서 그들은 분리되어 JS 코드가 동일하게됩니다. 질문에서

업데이트 HTML :

<div> 
    <input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label> 
    <input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label> 
    <input type="radio" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label> 
</div> 

<div> 
    <input type="radio" name="second" id="sd" value="superuser" /><label for="sd"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label> 
    <input type="radio" name="second" id="sc" value="superuser" /><label for="sc"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label> 
</div> 

업데이트 바이올린 here입니다. 라디오가 핵심적으로 선택되었는지 확인하려면 CSS를 적용하여 라디오를 숨겨서 동작 방식을 확인하십시오.

//$('#sites input:radio').addClass('input_hidden');