页面加载时基于 RadioButton 选择或值显示文本框答案

【问题标题】：Show Textbox based on RadioButton selection or value when Page Loads页面加载时基于 RadioButton 选择或值显示文本框
【发布时间】：2018-04-01 17:23:47
【问题描述】：

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

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

当我执行点击事件时工作正常，但我需要在页面加载时显示文本框，因为从数据库中检查了第一个单选按钮...

  <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 - 演示 http://jsfiddle.net/rbla/5fq8q2bj/

这里是使用切换的 jquery

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

任何想法...

【问题讨论】：

标签： javascript php jquery

【解决方案1】：

您的解决方案不起作用的原因是因为您正在检查所有无线电输入，然后根据其值切换元素 -无论是否选中。所以在运行时，这就是你的脚本所做的：

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

如果您在回调中添加控制台日志，您会发现.text 元素会快速连续显示和隐藏。

您真正想做的只是在选中时执行切换。因此，您的示例只需在执行切换之前强制检查 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>

【讨论】：