在rails中点击单选按钮时，让文本字段显示出来+javascript。

Question

嗨，我想让日期文本字段在单选框 "自定义 "被点击时显示出来，而当其他两个单选框之一被点击时消失。

到目前为止，这里是我的表格。

//Default radio buttons
<%= radio_button_tag 'set_start', 14 %>
<%= label :set_start, 'Biweekly' %>
<%= radio_button_tag  'set_start', 30 %>
<%= label :set_start, 'Monthly' %>

<%= radio_button_tag 'set_start', 0, {:class => "rad_but"} %>
<%= label :set_start, 'Custom' %>

//Button that only appears when custom is clicked
<div id='dates'>
    <%= label :starting, 'Start date'%>
    <%= text_field_tag 'starting', placeholder="MM/DD/YYYY"%>   
    <br>
    <%= label :ending, 'End date' %>
    <%= text_field_tag 'ending', placeholder="MM/DD/YYYY" %>
</div>

这里是我的javascript到目前为止（已编辑）。

$(document).ready(function(){
    $('input[name="set_start"]').on('change', function(evt) {
   if (evt.target.value === "0") {
      console.log("hello");
      $('#dates').show();
   } else {
      console.log("world");
      $('#dates').hide();
   }
})

});

还有我的HTML。

<div class="form-inputs">



            <label for="set_start_Biweekly">Biweekly</label>
                <input type="radio" name="set_start" id="set_start_30" value="30">
            <label for="set_start_Monthly">Monthly</label>

                <input type="radio" name="set_start" id="set_start_0" value="0" checked="checked">
            <label for="set_start_Custom">Custom</label>

                <br>
            <br>

            <div id="dates">
              <label for="starting_Start date" class="active">Start date</label>
              <input type="text" name="starting" id="starting" value="MM/DD/YYYY">  
            <br>
              <label for="ending_End date" class="active">End date</label>
            <input type="text" name="ending" id="ending" value="MM/DD/YYYY">
            </div>


</div>

目前，日期仍在显示，即使是默认的，也不会因为点击而改变。有什么办法可以解决这个问题吗？

Answer 1

假设你生成的HTML看起来像这样。

<input type="radio" name="set_start" value="14"/>
<label>Biweekly</label>
<input type="radio" name="set_start" value="30"/>
<label>Monthly</label>
<input type="radio" name="set_start" value="0"/>
<label>Custom</label>

<div id="dates">
    <label>Start date</label>
    <input type='date' name='starting' placeholder='MM/DD/YYYY' />
    <br />
    <label>End date</label>
    <input type='date' name='ending' placeholder='MM/DD/YYYY' />
</div>

你可以使用下面的jquery代码段：

$('input[name="set_start"]').on('change', function(evt) {
   if (evt.target.value === "0") {
      $('#dates').show();
   } else {
      $('#dates').hide();
   }
})

JSFIDDLE DEMO