Question

此表单包含隐藏的textara和可见文本框。如果选择选项“D：”，我想交换这些元素的可见性，但不确定如何正确检查在任何给定时间检查哪个单选按钮：

<script language="JavaScript" type="text/javascript">

function unhide(event) {  
    event = event || window.event ;
    target = event.target || event.srcElement;  
    if(target.value === "D:") {
        if(target.checked) {
        document.getElementByName('tarea').style.display='';  
        document.getElementByName('tbox').style.display='none';  
        }
     }else {
        if(target.checked) {
        document.getElementByName('tarea').style.display='none';  
        document.getElementByName('tbox').style.display='';   
        }
      }  
}
</script>
</head>
<body>
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded">
<input type="radio" name="opttype" value="A:" onclick="unhide(event)" />A:
<input type="radio" name="opttype" value="B:" onclick="unhide(event)" />B:
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide(event)" />C:
<input type="radio" name="opttype" value="D:" onclick="unhide(event)" />D:
<br><input type="tbox" name="event" />
<br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:none;"></textarea>

Answer 1

<script language="JavaScript" type="text/javascript">
function unhide(event) {  
    event = event || window.event ;
    target = event.target || event.srcElement;  
    if(target.value === "D:")
    {
        if(target.checked)
        {

        }
  }
}  
</script>
</head>
<body>
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded">
<input type="radio" name="opttype" value="A:" onclick="unhide()" />A:
<input type="radio" name="opttype" value="B:" onclick="unhide()" />B:
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide()" />C:
<input type="radio" name="opttype" value="D:" onclick="unhide(event)" />D:
<br><input type="tbox" name="event" /><br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:;"></textarea>
<input type="submit" name="submit" value="Submit" />
</form>

Answer 2

这里有两件大事。首先，您不应附加JavaScript event handlers as HTML attributes。相反，请使用"traditional" method（如下所示）或更多"advanced" method。

其次，不需要依赖事件对象，这将使您免于某些跨浏览器的问题。

<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded" id="frm-whatever">
    <input type="radio" name="opttype" value="A:"/>A:
    <input type="radio" name="opttype" value="B:"/>B:
    <input type="radio" name="opttype" value="C:"/>C:
    <input type="radio" name="opttype" value="D:"/>D:
    <br>
    <input type="tbox" name="event" id="inp-tbox"/><br>
    <textarea name="tarea" style="width:580;height:130;display:none;" id="inp-tarea"></textarea>
<form>

<script>
    var toggleFields = (function() {
        var inpTxtBox  = document.getElementById("inp-tbox"),
            inpTxtArea = document.getElementById("inp-tarea");

        return function(node) {
            if ( node.value == "D:" ) {
                inpTxtArea.style.display = 'block';
                inpTxtBox.style.display  = 'none';
            } else {
                inpTxtArea.style.display = 'none';
                inpTxtBox.style.display  = 'block';
            }
        };
    })();

    var radios = document.getElementById("frm-whatever").opttype;

    for ( var i=0, l=radios.length; i<l; ++i ) {
        radios[i].onchange = (function(i) { // closure to lock the value of `i` in this context
            return function() { // return a function as the event handler
                toggleFields(radios[i]);
            }
        })(i);
    } 
</script>

Working demo here。另外，请确保在表单后面包含JavaScript代码或使用onload event。

Answer 3

好的我需要更改之前的答案，因为我意识到我的代码读错了。 getElementByName不正确。它是以getElementsByName开头的。你也不要像你一样使用支票。这是一个布尔属性。你应该检查价值。

这是一个例子。我使用的是基本的javascript代码，因为您似乎没有使用任何库来帮助解决这些问题。

for (var i=0; i < document.formname.radiobuttonname.length; i++)
{
    if (document.formname.radiobuttonname[i].checked)
    {
        var rad_val = document.formname.radiobuttonname[i].value;
    }
}

Answer 4

根本不要遍历它，只需将元素直接传递给函数

function toggleInput(ele)
{
    if(ele.value === 'D:') {
        document.getElementsByName('tbox')[0].style.display = 'none';
        document.getElementsByName('tarea')[0].style.display = 'block';
    } else {
        document.getElementsByName('tbox')[0].style.display = 'block';
        document.getElementsByName('tarea')[0].style.display = 'none';
    }

}

//In the element tags, use the following
onclick="toggletInput(this)"

此外，使用getElementsByName定位输入元素可能会很麻烦......如果可能，请为这些元素添加一些ID，并使用getElementById直接定位它们。上面的代码假设每个tbox和tarea中只有一个或至少它们首先出现在DOM中，因为它的目标是getElementsByName返回的数组中的第一个元素。

通过无线电选择切换元素可见性

4 个答案: