基于单选框的动态表单字段答案

【问题标题】：dymanic forms fields based on radio boxes基于单选框的动态表单字段
【发布时间】：2019-04-06 14:31:48
【问题描述】：

我想制作一个动态表格。我基于这里的帖子 How To Show And Hide Input Fields Based On Radio Button Selection 这里有一个更新的 jsfiddle http://jsfiddle.net/QAaHP/16/

function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';
}

Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>
No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="visibility:hidden">
    If yes, explain:
    <input type='text' id='yes' name='yes'/>
    <br>What can we do to accommodate you?
    <input type='text' id='acc' name='acc'/>
</div>
other 3 <input type='text' id='other3' name='other3'><br>
other 4 <input type='text' id='other4' name='other4'><br>

我不是 javascript 的忠实拥护者，我尝试在此处的新 jsfiddle 中对其进行修改，以检测 'ifno' 条件

http://jsfiddle.net/35nxgw8o/

我的目标是同时检测“否”和“是”条件，以便我将其设为“非此即彼/或，绝不是“两者”条件，但运气不佳。也许我的想法都错了？

【问题讨论】：

我想你想要 onchange 而不是 onclick？
你在这里对你的实际问题是模糊的，但你已经在那个 div 上设置了visibility: hidden，所以它的内容将不可见，不管你设置了什么display到。
@Stevish 不确定如何按照此处的建议实施“onchange”。也许有人可以举个例子？
@miken32 让我澄清一下。当是/否条件被改变时，它应该显示一个或另一个（或者），从不同时显示。
显示一个或另一个什么？

标签： javascript

【解决方案1】：

@Stevish 确实 onchage 做到了。

我将我在此处使用的内容按原样发布，以便其他人可能会发现它有用。它是 PHP 和 Javascript。它允许我在 URL (GET) 中设置预先确定的变量，然后根据它的加载方式（隐藏或显示隐藏）Javascript 从那里处理它。

echo '><span style="color:#666; font-weight:bold; line-height: 300%">&nbsp;Yes</span><input type="radio" name="mppdf" value="yes" onChange="getValue(this)"';

    if ($_GET['mppdf']!='yes') 
    {
    $showhide=' style="display: none "';
    $hideshow=' style="display: block "';
    echo ' checked';
    }
    else
    {
    }

    if (($_GET['pdf']=='yes') || ($_GET['mppdf']=='yes') || (isset($_GET['pdfname'])))
    {
    $hideshow=' style="display:none; "';
    $showhide=' style="display: block "';
    echo ' checked';
    }
    else
    {



echo '><div id="yourfield1" '.$showhide.'>';
echo'<input style="width: 120px; height: 16px; color:#666; background-color: #DDD; font-weight:bold" type="text" value="'.$_GET['pdfname'].'" placeholder="'.$name.'" id="pdfname" name="pdfname"'; 


echo' <div id="yourfield2" '.$hideshow.'"> ';
echo'
<span style="color:#666; font-weight:bold; line-height: 300%">&nbsp;jpg</span> 
<input type="radio" name="jpgpdf" value="no" id="JPG"';
    if (($_GET['pdf']!='yes') && ($_GET['mppdf']!='yes') && (!isset($_GET['pdfname'])))
    {
    echo ' checked';
    }
    else
    {
    }
echo '><span style="color:#666; font-weight:bold; line-height: 300%">&nbsp;pdf</span><input type="radio" name="jpgpdf" value="no" id="PDF"';

    if (($_GET['pdf']=='yes') || ($_GET['mppdf']=='yes') ||(isset($_GET['pdfname'])))
    {
    echo ' checked';
    }
    else
    {
    }
echo'>    
</div>';

<script type="text/javascript">
function getValue(x) {
if(x.value == 'No'){
  document.getElementById("yourfield1").style.display = 'none'; // you need a identifier for changes    
  document.getElementById("yourfield2").style.display = 'block'; // you need a identifier for changes
  }
else{
  document.getElementById("yourfield1").style.display = 'block';  // you need a identifier for changes
  document.getElementById("yourfield2").style.display = 'none';  // you need a identifier for changes

   }
}
</script>

【讨论】：