Dynamically hide/show radio buttons in rails form doesn't hide when unchecked

Question

I need to dynamically show/hide a list of radio buttons in my rails form when the "Daily" radio button is checked. This almost works, except that when I check "Weekly" (which unchecks "Daily"), the list does not hide. New to javascript and trying to figure out what I'm missing.

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

Here is the 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

It is because when you click weekly you don't call the javascript function - resetradio(this). Following should work

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

Answer 2

I fixed it by adding an Onclick to Weekly (Thanks Shani!), and then creating a radio variable in the resetradio() function instead of passing "this" into it.

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