Question

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

我的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伪类和一般兄弟组合~的现代浏览器。

Answer 2

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

Answer 3

在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">

Answer 4

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

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

然后使用jQuery：

 function yesnoCheck() {
   if ($("#yesCheck").is('checked')) {
       $("#ifYes").show();
   }
 }

优化javascript显示/隐藏无线电表单选项

4 个答案: