在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 sn -p

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

JSFIDDLE DEMO