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

时间:2019-04-05 18:01:57

标签: javascript

我想制作一个动态表格。我将其基于此处的帖子 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>

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

http://jsfiddle.net/35nxgw8o/

我的目标是同时检测“否”和“是”情况,以使我将其设置为“要么/或永远不会”两者都有,但运气不好。也许我对这一切都错了?

1 个答案:

答案 0 :(得分:0)

@Stevish确实onchage做到了。

我正在此处发布我在这里使用的内容,因此其他人可能会发现它有用。它是PHP和Javascript。它使我能够在URL(GET)中设置预定变量,然后根据其加载方式(hideshow或showhide),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>