显示文本框时，页面加载

Question

所以，当我打开一个网页检索我从数据库信息，并会检查根据其值一个单选按钮...

我需要的文本框最初显示 - 基于该单选按钮的存在已经检查

工作正常，当我执行click事件，但我需要显示文本框在页面加载时，因为第一单选按钮从DB检查...

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

这里是用拨动

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

任何想法了jQuery ...

Answer 1

您的解决方案是不工作的原因是因为你要通过你的所有无线输入，然后切换元素基于它的价值— 无论它是否被检查。因此，在运行时，这是你的脚本的作用：

1. 遇到的第一个无线电元件，触发onchange事件，触发onchange回调，并显示.text元素
2. 遇到第二无线电元件，触发onchange事件，火灾onchange回调，并隐藏了.text元素再次

如果你把控制台登录你的回调，你就会意识到，.text元素显示和隐藏在快速连续。

你真正想要做的只是在检查时执行切换。感谢 -

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