javascript - .show() 以相同形式的字段值为条件的元素

Question

我有一个表单(如下)，其中包含一个文本输入 id="age" 和两个 radio 输入 id="radio_value_1" 和 id="radio_value_2 “。该页面将加载由 .hide() 隐藏的两个 radio 。如果文本字段中的值高于 5，我希望第一个再次 .show() ，如果文本字段中的值高于 10，则第二个再次运行。我尝试过

 $('#age').click(function(){
    // 
     });

但效果是，一旦单击该字段，页面就会消失。

<form name='survey' action='' method='post'>

Age:<br>
<input type="text" id="age" name="Q1">

<br>

<table border="0" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <td width="25">
    <label>
    <input id="radio_value_1" name="Q2" value="1" type="radio">
    </label>
      </td>
      <td>First choice</td>
    </tr>
    <tr>
      <td width="25">
    <label>
    <input id="radio_value_2" name="Q2" value="2" type="radio">
    </label>
      </td>
      <td>Second choice</td>
    </tr>
  </tbody>
</table>

<input type='submit' value=SUBMIT>
</form>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.min.js'></script>
<script>
$(document).ready(function(){
    $( '#radio_value_1' ).hide();
    $( '#radio_value_2' ).hide();
    });
</script>

</body>
</html>

Answer 1

你可以这样做:

$("#age").on("input", function(){
    var val = parseInt( $(this).val() );
    $( '#radio_value_1' ).toggle( val > 5 );
    $( '#radio_value_2' ).toggle( val > 10 );
});