Question

我需要动态显示/隐藏我的轨道表单中的单选按钮列表，当＆＃34;每日＆＃34;选中单选按钮。这几乎是有效的，除了当我检查＆＃34;每周＆＃34; （取消选中＆＃34;每日＆＃34;），列表不隐藏。 javascript的新手，并试图弄清楚我错过了什么。

<%= 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

这是因为当你点击每周时你不会调用javascript函数 - resetradio（this）。以下应该工作

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

Answer 2

我通过向Weekly添加Onclick（感谢Shani！）修复它，然后在resetradio（）函数中创建一个无线电变量，而不是将“this”传递给它。

<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>

动态隐藏/显示轨道形式的单选按钮在未选中时不会隐藏

2 个答案: