优化javascript显示/隐藏单选窗体选项

Refine javascript show/hide radio form options

本文关键字：单选 窗体 选项 隐藏 javascript 显示 优化      更新时间：2023-09-26

我有一个表格，如果您通过单选按钮选择是或否，它将提供图像上传或文本区域的替代选项。

我的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';
}

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

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

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

Js中不能有两个同名函数。所以，只保留一个功能，并威胁其中的条件：

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
        document.getElementById('ifNo').style.display = 'none';
    }
    else {
        //Since it's a radio, if "yes" is not selected, the "no" is
        document.getElementById('ifYes').style.display = 'none';
        document.getElementById('ifNo').style.display = 'block';
    }
}

此外，onclick事件不需要javascript:符号。。。它直接调用函数：

<input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck">

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

首先，您对函数的调用似乎是错误的：

 Yes<input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck">

然后使用jQuery:

 function yesnoCheck() {
   if ($("#yesCheck").is('checked')) {
       $("#ifYes").show();
   }
 }
相关文章：