JQuery를 사용하여 라디오 버튼을 이미지로 바꿉니다.

Question

체크하고 선택하지 않으면 이미지로 바꿀 라디오 버튼 그룹이 있습니다.

<div id="answerOptions"> 
<input type="radio" name="answeroption" id="r1" value="radio1" checked=''checked'/>radio1<br/> 
<input type="radio" name="answeroption" id="r2" value="radio2"/>radio2<br/> 
</div> 

두 개의 이미지 1. 체크 된 라디오 버튼의 경우 button_on.JPG이고 선택하지 않은 라디오 버튼의 경우 2. button_off.JPG가 있습니다. 다음 작업을 수행하고 싶습니다. 1. 라디오 버튼을이 이미지로 바꾸고 싶습니다. 2. 페이지로드시 라디오 버튼의 이미지가 올바른지 확인하십시오.

참고 : 라디오 단추는 동적으로 생성되며 각 요청에 따라 해당 ID와 값이 변경됩니다.

Jquery를 사용하여 도움이 필요합니다. 귀하의 의견을 사과하십시오. 바퀴를 재발견하지 마십시오

Answer 1

,이에 대한 좋은 라이브러리를 사용 : 1. 부하에 라디오 버튼을 대체

http://uniformjs.com/

Answer 2

다음 코드는 두 가지 작업을 수행합니다. 2. 이미지를 클릭하면 변경됩니다. 나는 그것이 당신의 상황에 완벽하다고 가르쳐주지는 않겠지 만, 당신을 시작하기에 충분할 것입니다.

// on load 
$(function() { 
    // replace the checkboxes with the images 
    $("input name='answeroption']").each(function() { 
     if ($(this).attr('checked')) { // radio button is checked onload 
      $(this).hide(); 
      $(this).after($("<img src='button_on.jpg' class='radioButtonImage' />")); 
     } else { // radio button is not checked 
      $(this).hide(); 
      $(this).after($("<img src='button_off.jpg' class='radioButtonImage' />")); 
     } 
    }); 

    // setup click events to change the images 
    $("input.radioButtonImage").click(function() { 
     if($(this).attr('src') == 'button_on.jpg') { // its checked, so uncheck it 
      $(this).attr('src', 'button_off.jpg'); 
      $(this).prev().attr('checked', 'false'); 
     } else { // its not checked, so check it 
      $(this).attr('src', 'button_on.jpg'); 
      $(this).prev().attr('checked', 'true'); 
     } 
    }); 
});