확인란을 선택하지 않으면 레일 양식의 라디오 버튼을 숨기거나 숨기지 않습니다.

Question

"매일"라디오 버튼을 선택하면 내 레일 양식의 라디오 버튼 목록을 동적으로 표시하거나 숨길 필요가 있습니다. 이 기능은 거의 작동합니다. 단, "Weekly"("Daily"는 선택 취소)를 선택하면 목록이 숨겨지지 않습니다. 자바 스크립트에 익숙하지 않고 내가 누락 된 부분을 파악하려고합니다. resetradio (이) -

<%= form_for list_chores_path(@list.id) do |f| %> 
<div class="field"> 
    <%= f.radio_button :frequency, 'Daily', onClick: "resetradio(this)" %> Daily<br> 
    <div class="buttons" style="display:none;"> 
     <%= f.radio_button :time_of_day, 'Morning', onClick:"setradio()" %> Morning<br> 
    <%= f.radio_button :time_of_day, 'Evening', onClick:"setradio()" %> Evening<br> 
    <%= f.radio_button :time_of_day, 'Any Time', onClick:"setradio()" %> Any Time<br> 
    </div> 
    <%= f.radio_button :frequency, 'Weekly' %> Weekly<br> 
</div> 


<script type="text/javascript"> 
    function resetradio (radio) { 
    var buttons = document.querySelector('.buttons'); 
    var radios = document.getElementsByName('/lists/<%= @list.id %>/chores[time_of_day]'); 
    radios[0].checked = false; 
    if (radio.checked == true) { 
     buttons.style.display = 'block'; 
      } 
    else { 
     buttons.style.display = 'none'; 
      } 
    } 

    function setradio() { 
    var radio = document.getElementsByName('/lists/<%= @list.id %>/chores[frequency]')[0]; 
     if (radio.checked == false) { 
      radio.checked = true;  
      } 
     } 
    </script> 

다음은 HTML 매주 클릭 할 때 자바 스크립트 함수를 호출하지 않기 때문에 그것은이다

<div class="field"> 
    <input onclick="resetradio(this)" type="radio" value="Daily" name="/lists/4/chores[frequency]" id="_lists_4_chores_frequency_daily"> Daily<br> 
    <div class="buttons" style="display: block;"> 
     <input onclick="setradio()" type="radio" value="Morning" name="/lists/4/chores[time_of_day]" id="_lists_4_chores_time_of_day_morning"> Morning<br> 
     <input onclick="setradio()" type="radio" value="Evening" name="/lists/4/chores[time_of_day]" id="_lists_4_chores_time_of_day_evening"> Evening<br> 
     <input onclick="setradio()" type="radio" value="Any Time" name="/lists/4/chores[time_of_day]" id="_lists_4_chores_time_of_day_any_time"> Any Time<br> 
    </div> 
    <input type="radio" value="Weekly" name="/lists/4/chores[frequency]" id="_lists_4_chores_frequency_weekly"> Weekly<br> 

Answer 1

에게 있습니다. 주간에 onclick을 추가하여

<%= f.radio_button :frequency, 'Weekly', onClick: "resetradio(this)" %> Weekly<br> 

Answer 2

그것을 고정을 작동해야하기 (덕분 샤니!), 그리고 대신 "이"그것으로 전달하는 resetradio() 함수에서 무선 변수를 작성.

<script type="text/javascript"> 
    function resetradio() { 
     var radio = document.getElementsByName('/lists/<%= @list.id %>/chores[frequency]')[0]; 
     var buttons = document.querySelector('.buttons'); 
     var radios = document.getElementsByName('/lists/<%= @list.id %>/chores[time_of_day]'); 
     radios[0].checked = false; 
     if (radio.checked == true) { 
     buttons.style.display = 'block'; 
    } 
    else { 
     buttons.style.display = 'none'; 
    } 
} 



function setradio() { 
    var radio = document.getElementsByName('/lists/<%= @list.id %>/chores[frequency]')[0]; 
    if (radio.checked == false) { 
     radio.checked = true; 

     } 
    } 
</script>