Javascript .show（）以相同形式的字段值为条件的元素_Javascript_Jquery

Javascript .show（）以相同形式的字段值为条件的元素

javascript jquery

Javascript .show（）以相同形式的字段值为条件的元素,javascript,jquery,Javascript,Jquery,我有一个表格（如下），有一个文本输入id=“age”和两个无线电输入id=“radio\u value\u 1”和id=“radio\u value\u 2”。该页面将加载由.hide（）隐藏的两台收音机。如果文本字段中的值大于5，我希望第一个字段再次显示.show（），如果值大于10，则第二个字段再次显示。我试过了 $('#age').click(function(){ // }); <form name='survey' action='' method='po

我有一个表格（如下），有一个文本输入

id=“age”

和两个无线电输入

id=“radio\u value\u 1”

和

id=“radio\u value\u 2”

。该页面将加载由

.hide（）

隐藏的两台收音机。如果文本字段中的值大于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>

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

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


年龄：



首选
第二选择
$（文档）.ready（函数（）{
$（'#radio_value_1'）.hide（）；
$（'#radio_value_2'）.hide（）；
});

您可以这样做：

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

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

你也可以把这个作为你的整个剧本来尝试

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

$("#age").on("input", function(){
    $( '#radio_value_1' ).hide();
    $( '#radio_value_2' ).hide();
    if($(this).val()>5&&$(this).val()<10) {
        $( '#radio_value_1' ).toggle();
    }
    if($(this).val()>10) {
        $( '#radio_value_2' ).toggle();
    }
});

$（“#年龄”）。关于（“输入”，函数（）{
$（'#radio_value_1'）.hide（）；
$（'#radio_value_2'）.hide（）；
如果（$（this.val（）>5&&$（this.val（）10）{
$（“#单选_值_2”）.toggle（）；
}
});

而不是使用。单击（）使用。更改（）

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

你可以试试这样的

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

$("#age").change(function(){
      var text_value = parseInt( $(this).val(), 10 );
      if( text_value > 5 ){
            $( '#radio_value_1' ).show();
      }
      else{
            $( '#radio_value_1' ).hide();
      }
      if( text_value > 10 ){
            $( '#radio_value_2' ).show();
      }
      else{
            $( '#radio_value_2' ).hide();
      }
});

您可以发布一些代码/共享JSFIDLE或带有复选框的东西，以便我可以帮助诊断吗？