如何在javascript中隐藏表格

问题描述

| 单击标签时如何隐藏表格并显示它？

<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\"
}

首先，表单应默认为隐藏状态。单击标签后，将显示表格。我怎么做？     

解决方法

        

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

这样，当您单击浏览器标签时，所有\'os \'仍将显示/消失，而无需进行任何其他隐藏/显示。可能不完全是您想要的，但应该可以帮助您入门。     ,        首先，您必须将表单的CSS样式“ 3”设置为“ 4”。然后您可以使用例如。 jQuery的.show（）函数。 CSS样式如下所示：

form#form1 {
    display: none;
}