通過無線電選擇的切換元素可見性

此表單具有隱藏的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

通過無線電選擇的切換元素可見性

回答

相關問題