页面载荷

Question

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

我需要最初显示的文本框 - 基于已经检查过的radiobutton

在我执行click事件时工作正常，但我需要在页面加载时显示文本框，因为从DB中检查了第一个radiobutton ......

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

这是我的FIDDLE - DEMO 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真实的检查即可：

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

见下面的工作示例：

＆＃13;
＆＃13;
$(document).ready(function() {
  $(".text").hide()
  $('[name=radio1]').on('change', function() {
    if (this.checked) {
      $('.text').toggle(this.value === 'Show');
    }
  }).trigger('change');
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;