Question

这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
    document.getElementById("radio1").onchange = function() {
        if(this.checked == true) {
            document.getElementById("list1").style.visibility = "hidden";
            document.getElementById("list1").style.display = "none";
        }
    };

    document.getElementById("radio2").onchange = function() {
        if(this.checked == true) {
            document.getElementById("list1").style.visibility = "visible";
            document.getElementById("list1").style.display = "block";
        }
    };
</script>
</HEAD>
<BODY>

<form method = "post">

<br /><p id="first"><label>First Name:</label><input type="text" name="first" size="30" /></p>

<br /><p id="last"><label>Last Name:</label><input type="text" name="last" size="30" /></p>

<br /><p id="instructor"><label>Instructor:</label><select name="instructor">
<option value="instructor1">instructor1</option>
<option value="instructor2">instructor2</option></select></p>

<br /><p id="hospitalorientation"><label>Hospital Orientation:</label>
<div id='buttons'>
<label><input id="radio1" type="radio" name="hospital" /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" /> Complete </label>
</div>
<div id="list1" style="display: none;">
<label>Month Complete:
<select>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>
</label>
</div>

</form>
</BODY>
</HTML>

我会有更多的领域，如医院领域，所以我需要不止一个。我需要一个下拉菜单来显示何时选择某个单选按钮。但我在JavaScript中尝试的一切都不起作用。我是javascript的新手。

Answer 1

我认为是因为代码是在列表实际添加到文档结构之前执行的。将它封装在window.onload处理程序中，如下所示：

...
<script type="text/javascript">
window.onload=function()
{
    document.getElementById("radio1").onchange = function()
    {
        if(this.checked == true)
        {
            document.getElementById("list1").style.visibility = "hidden";
            document.getElementById("list1").style.display = "none";
        }
    };

    document.getElementById("radio2").onchange = function()
    {
        if(this.checked == true)
        {
            document.getElementById("list1").style.visibility = "visible";
            document.getElementById("list1").style.display = "block";
        }
    };
}
</script>
...

LG
warappa

Answer 2

作为附带问题，您不需要style.visibility...行

还有一件事：

通常，最好使用attachEvent或addEventListener方法添加事件侦听器（允许更多控件，以及一个操作的多个侦听器），如下所示：

function addEvent(el, eType, fn, uC) {
  if (el.addEventListener) {
    el.addEventListener(eType, fn, uC);
    return true;
  } 
  else if (el.attachEvent) {
    return el.attachEvent('on' + eType, fn);
  }
  else {
    el['on' + eType] = fn;
  }
}

然后只需使用

addEvent(
    document.getElementById("radio1"),
    "change",
    function(){
      if(this.checked == true){
            document.getElementById("list1").style.display = "none";
      }
    },
    false);

这是跨浏览器和更好的练习

Answer 3

这里最大的问题是javascript将在创建单选按钮之前执行。因此document.getElementById(...)不会找到该元素，因为它不存在。尝试将代码添加到函数中，并使该函数在主体上运行。

Answer 4

你必须等到你的对象（单选按钮加载）这是一些有效的代码。或者调用window.onload

<script type="text/javascript">
    function checkEm() {
        if (document.getElementById("radio1").checked) {
            document.getElementById("list1").style.visibility = "hidden";
            document.getElementById("list1").style.display = "none";
        };

        if (document.getElementById("radio2").checked) {
            document.getElementById("list1").style.visibility = "visible";
            document.getElementById("list1").style.display = "block";
        };
    };
    </script>

 <label><input id="radio1" type="radio" name="hospital" onclick="checkEm()"  /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" onclick="checkEm()" /> Complete </label>

显示/隐藏下拉菜单

4 个答案: