Question

我正在学习javascript脚本并尝试隐藏无线电更改中的某些字段。它不起作用，但我看不出原因，也没有控制台错误。这就是我想要的：

HTML

    <form>
  <input type="text" name="field_0" id="field_0" value=" " class='text_box'>
  <input type="text" name="field_1" id="field_1" value=" " class='text_box'>
  <input type='radio' name='field_2' id='field_2_0' value="I can come" class='form_radio'>
  <input type='radio' name='field_2' id='field_2_1' value="I can't come" class='form_radio'>
  <input type='hidden' name='field_2_length' value='2'>
  <input class="extra" type="text" name="field_3" id="field_3" value=" " class='text_box'>
  <input class="extra" type="text" name="field_4" id="field_4" value=" " class='text_box'>
  <input type='submit' value='Send' class='form_button'>
</form>

JS

 jQuery(document).ready(function($) {
   $('input:radio[name=field_2]').change(function() {
     if ($(this).val() == 'hide') {
       $('.extra').hide();
     } else {
       $('.extra').show();
     }
   });

 });

这是代码（不）正在运行 https://jsfiddle.net/spadez/s25stbde/2/

我出错的任何想法？

Answer 1

用于测试$('input:radio[name=field_2]')值的代码正在寻找值'hide'，因为它应该寻找“我不能来”的值。将您的JavaScript代码更改为

 jQuery(document).ready(function($) {
   $('input:radio[name=field_2]').change(function() {
     if ($(this).val() == "I can't come") {
       $('.extra').hide();
     } else {
       $('.extra').show();
     }
   });

 });

在这里看到工作小提琴。 https://jsfiddle.net/mcebb8py/1/

Answer 2

在你的版本中，2个无线电值是＆＃34;我可以来＃34;和＆＃34;我不能来＃34;

因此，您在更改处理程序中检查的情况，$(this).val() == 'hide'永远不会发生。

这是一个示例，将无线电输入的一个值更改为＆＃34;隐藏＆＃34;：

＆＃13;

     jQuery(document).ready(function($) {
       $('input:radio[name=field_2]').change(function() {
         console.log('this ', $(this).val())
         if ($(this).val() == 'hide') {
           $('.extra').hide();
         } else {
           $('.extra').show();
         }
       });
     });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="field_0" id="field_0" value=" " class='text_box'>
  <input type="text" name="field_1" id="field_1" value=" " class='text_box'>
  <input type='radio' name='field_2' id='field_2_0' value="hide" class='form_radio'>
  <!-- changed value to hide -->
  <input type='radio' name='field_2' id='field_2_1' value="I can't come" class='form_radio'>
  <input type='hidden' name='field_2_length' value='2'>
  <input class="extra" type="text" name="field_3" id="field_3" value=" " class='text_box'>
  <input class="extra" type="text" name="field_4" id="field_4" value=" " class='text_box'>
  <input type='submit' value='Send' class='form_button'>
</form>

＆＃13;

无法在无线电更改时使用jquery隐藏字段

2 个答案: