在页面加载时根据RadioButton选择或值显示文本框

Question

因此，当我加载页面时，我从数据库中检索信息，并将根据其值检查单选按钮...

我需要先显示文本框-基于已选中的单选按钮

当我执行click事件时，效果很好，但是页面加载时我需要显示文本框，因为从数据库中选中了第一个单选按钮...

  <p>
  Show textboxes <input type="radio" name="radio1" value="Show" checked="checked">
  Do nothing <input type="radio" name="radio1" value="Nothing">
  </p>

  Wonderful textboxes:

  <div class="text"><p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>

  <div class="text"><p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>

这是我的资料-演示http://jsfiddle.net/rbla/5fq8q2bj/

这是使用切换的jQuery

 $(document).ready(function() {
     $(".text").hide()
     $('[name=radio1]').on('change', function(){
        $('.text').toggle(this.value === 'Show');
     }).trigger('change');
 });

有任何想法吗...

Answer 1

解决方案无法正常工作的原因是，您要遍历所有无线电输入，然后根据元素的值切换元素（ 无论是否选中该元素）。 因此，在运行时，这就是脚本的作用：

1. 遇到第一个单选元素，触发onchange事件，触发onchange回调，并显示.text元素
2. 遇到第二个单选元素，触发onchange事件，触发onchange回调，并再次隐藏.text元素

如果将控制台日志放在回调中，您将意识到.text元素会快速连续显示和隐藏。

您真正想要做的只是仅在选中时执行切换。 因此，您的示例将通过在执行切换之前简单地强制执行一次this.checked是否为真的检查而this.checked ：

$('[name=radio1]').on('change', function() {
  if (this.checked) {
    $('.text').toggle(this.value === 'Show');
  }
}).trigger('change');

请参见下面的工作示例：

 $(document).ready(function() { $(".text").hide() $('[name=radio1]').on('change', function() { if (this.checked) { $('.text').toggle(this.value === 'Show'); } }).trigger('change'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Show textboxes <input type="radio" name="radio1" value="Show" checked="checked"> Do nothing <input type="radio" name="radio1" value="Nothing"> </p> Wonderful textboxes: <div class="text"> <p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"> </p> </div> <div class="text"> <p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"> </p> </div>