[英]Show Textbox based on RadioButton selection or value when Page Loads
So when I load a page I retrieve info from a DB and will check a radiobutton based on its value... 因此,当我加载页面时,我从数据库中检索信息,并将根据其值检查单选按钮...
I need the textboxes to show initially - based on the radiobutton being already checked 我需要先显示文本框-基于已选中的单选按钮
works fine when I perform the click event, but I need to show the textboxes when the page loads because the 1st radiobutton is checked from the DB... 当我执行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>
Here is my FIDDLE - DEMO http://jsfiddle.net/rbla/5fq8q2bj/ 这是我的资料-演示http://jsfiddle.net/rbla/5fq8q2bj/
here is the jquery using toggle 这是使用切换的jQuery
$(document).ready(function() {
$(".text").hide()
$('[name=radio1]').on('change', function(){
$('.text').toggle(this.value === 'Show');
}).trigger('change');
});
any ideas... 有任何想法吗...
The reason your solution is not working is because you are going through all your radio inputs and then toggling the element based on its value— regardless if it is checked or not . 解决方案无法正常工作的原因是,您要遍历所有无线电输入,然后根据元素的值切换元素( 无论是否选中该元素)。 So at runtime, this is what your script does:
因此,在运行时,这就是脚本的作用:
onchange
event, fires onchange
callback, and shows the .text
element onchange
事件,触发onchange
回调,并显示.text
元素 onchange
event, fires onchange
callback, and hides the .text
element again onchange
事件,触发onchange
回调,并再次隐藏.text
元素 If you put a console log in your callback, you will realized that the .text
element is shown and hidden in quick succession. 如果将控制台日志放在回调中,您将意识到
.text
元素会快速连续显示和隐藏。
What you really want to do is only to perform the toggling when it is checked. 您真正想要做的只是仅在选中时执行切换。 Therefore, your example will work by simply enforcing a check that
this.checked
is truthy before performing the toggling: 因此,您的示例将通过在执行切换之前简单地强制执行一次
this.checked
是否为真的检查而this.checked
:
$('[name=radio1]').on('change', function() {
if (this.checked) {
$('.text').toggle(this.value === 'Show');
}
}).trigger('change');
See working example below: 请参见下面的工作示例:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.