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

此表单具有隐藏的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>

来源

2010-07-04 Mose

这里有两件大事。首先，你不应该附上你的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。

来源

2010-07-04 08:20:04

你先生，是男人。 – Mose 2010-07-04 10:52:14

好，我需要改变我以前的答案因为我意识到我读错了你的代码。 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; 
    } 
}

来源

2010-07-04 06:15:49 spinon

哈哈有这么多的事情错了上述O_0 – Marko 2010-07-04 06:22:41

把四个空格代码代码格式化为代码的每一行之前。 – icktoofay 2010-07-04 06:24:57

这只是向他展示如何轻松遍历单选按钮并查找值的基本方法。它可以做得更干净，但这是有效的，并且根据他粘贴的代码来判断他采用的是同样的方法。感谢关于四个空间的提示。我尝试它，有时它不适合我。但让我编辑一下，看看我能否做到。 – spinon 2010-07-04 06:27:25

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

来源

2010-07-04 06:52:13

不要循环在它所有，只是直接通过元素的功能

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输入元素可如果可能的话是凌乱... ，将这些元素添加到这些元素并直接使用getElementById来定位它们。上面的代码假定每个tbox和tarea只有一个或者至少它们在DOM中首先出现，因为它定位了由getElementsByName返回的数组中的第一个元素。

来源

2010-07-04 07:16:05 tsgrasser

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

回答

相关问题