如何在javascript中隱藏表單

Question

如何隱藏表單並在單擊標籤時顯示它？

<form id="form1" action="javascript:return true;" name="form1"> 
<input type="radio" name="group1" value="opt1" id="opt1" 
onclick="show()"><label for="opt1">Option 1</label><br> 
<input type="radio" name="group1" value="opt2" id="opt2" 
onclick="show()"><label for="opt2">Option 2</label><br> 
<input type="radio" name="group1" value="opt3" id="opt3" 
onclick="show()"><label for="opt3">Option 3</label><br> 

<div id="droplist"> 
<select name="opt2-select"> 
<option value='opt2a'>Option 2A</option> 
<option value='opt2b'>Option 2B</option> 
<option value='opt2c'>Option 2C</option> 
</select> 
</div> 
</form> 

<label id="a" onclick="formenable()">click</label>.... 

function formenable() 
{ 
var o=document.getElementById("form1"); 
o.style.visibility="hidden" 
} 

首先窗體應該隱藏默認。點擊標籤後，應顯示錶格。我怎麼做？

Answer 1

<form id="form1" action="javascript:return true;" name="form1" style="display:none"> 

---

<script> 
function cl(obj) { 
    div = document.getElementById(obj.id + 'div'); 
    div.style.display = (div.style.display == 'block') ? 'none' : 'block'; 
} 
</script> 

<label id="browser" onclick="cl(this)">Browser</label> 

<div id="browserdiv" style="display: none"> 
    Browser stuff goes here 

    <label id="os" onclick="cl(this)">OS</label> 

    <div id="osdiv" style="display: none"> 
     OS stuff goes here 
    </div> 

</div> 

有了這個，當你點擊瀏覽器標籤，所有的「操作系統」的仍然會出現/消失，無需做任何額外的隱藏/顯示。可能不完全是你想要的，但應該讓你開始。

Answer 2

首先，您必須將該窗體的CSS樣式display設置爲none。然後你可以使用例如。 jQuery的.show() function。

CSS樣式看起來像這樣：

form#form1 { 
    display: none; 
}