레일의 Javascript 및 radio_button - 한 번만 상태 확인

Question

내 이미지에 라디오 버튼을 넣으려고합니다. 사용자가 하나의 이미지를 클릭하면 다른 라디오 버튼이 false로 설정되었는지 확인해야합니다.

$('.image_choose').each(function() { 

    $(this).click(function() { 

      $('.image_choose').each(function() { 
       $(this).attr("style","border:1px solid #e5e5e5"); 
       $(this).attr("id","in_active"); 
       $inputs = $(this).find('input[type="radio"]'); 
       $inputs.attr("checked", false); 
      }); 
       $label = $(this), $input = $(this).find('input[type="radio"]'); 
     $label.find('input').attr("checked", true); 
      }); 
    }); 

레일 : 지금 내가 이런 일이

<% @array_new.each do |a|%> 
    <div class='image_containter'> 
     <li class='image_choose'>  
     <%= f.radio_button :image_url ,a %> 

        </li> 
      </div> 
    <% end %> 

을 그래서 내가 생각하는 - image_choose 요소에 사용자가 클릭이 먼저 모든 image_choose에 내가 ATTR을 설정하고 false로 선택한 경우. 그리고 $ this 요소에 대해 true로 변경하십시오. 여기서 무엇이 잘못 되었습니까? 처음 이미지를 클릭 할 때만 radio_button은 그래프와 상태를 변경합니다.

일부 솔루션 :이 작업을 수행하는 그것의 좋은 방법을 생각 해달라고하지만 난 그 발견

는 :

$label.find('input').prop("checked", true); 
$label.find('input').attr("checked", true); 

내가 이렇게

- 그것이해야처럼 작업을 시작. .prop만이 입력을 체크하지 않습니다 = 'checked', 그리고 .attr만이 두 번째 클릭시 라디오 버튼 값을 변경하지 않습니다 ... 여기서 잘못된 점을 이해하지 못합니다.

Answer 1

이렇게하면 라디오 버튼을 사용하여 작업 할 때 자바 스크립트를 다룰 필요가 없습니다.

더 쉽게하려면 목록의 각 라디오 버튼에 실제 <label> 태그를 사용하십시오. 해당 레이블의 아무 곳이나 클릭하면 라디오 버튼이 트리거됩니다. ID로 라디오 버튼에 라벨을 올바르게 연결했는지 확인하십시오.

또한 라디오 버튼 ID가 항상 고유해야합니다. 모든 라디오 버튼의 name 속성이 동일해야 브라우저가 라디오 버튼 그룹임을 알 수 있습니다.

사용이 ERB (100 아니라면 % 정확한 적응) :

<% @image_urls.each do |img| %> 
    <%= f.label :image_url, img_tag(img) %> 
    <%= f.radio_button :image_url, img %> 
<% end %> 

이 결과는 다음과 비슷한 모습이 될 것입니다

<label for="image_url_your_img_val1"> 
    <img src="yourimage1.png"/> 
</label> 
<input type="radio" name="image_url" id="image_url_your_img_val1" value="your_img_val1"/> 

<label for="image_url_your_img_val2"> 
    <img src="yourimage2.png"/> 
</label> 
<input type="radio" name="image_url" id="image_url_your_img_val2" value="your_img_val2" />