javascript - 优化 javascript 显示/隐藏单选表单选项

Question

我有一个表单，如果您通过单选按钮选择"is"或“否”，它将提供图像上传或要填写的文本区域的替代选项。

我的 Js 有点错误并且无法正常工作...我正在寻求关于我哪里出了问题的建议...

<label>Can a Drawing be Supplied:</label><br>

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="display:none">               
  Image upload: <input type='file' id='yes' name='yes'><br>
</div>

<div id="ifNo" style="display:none">
  If no can you sepcify form and dimensions:<br>
<textarea type='text' id='other3' name='other3'></textarea><br>

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

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

Answer 1

以防万一您对纯 CSS 解决方案感兴趣。删除内联样式，添加以下 css。 Demo .

#ifYes, #ifNo { display: none;}
#yesCheck:checked ~ #ifYes {display: block;} 
#noCheck:checked ~ #ifNo {display: block;}

适用于支持 :checked 伪类和通用同级组合器 ~ 的现代浏览器。