在html中隐藏/显示表单？答案

【问题标题】：Hide/Show form in html?在html中隐藏/显示表单？
【发布时间】：2011-09-13 11:21:55
【问题描述】：

我是 html 新手，如果用户勾选一个框，我会尝试隐藏/显示表单，表单会出现在其下方。

我有一个表格，例如

Name : 
Username : 
Add More Users: (tickbox)

如果用户勾选“添加更多用户”，则会在下方显示另一个包含“姓名、用户名、添加更多用户”字段的表单。这怎么可能？

【问题讨论】：

标签： javascript html css forms

【解决方案1】：

HTML

<input type="checkbox" onclick="display(this)">Add more users</input>
<div id="yourDiv"> ...other forms... </div>

JavaScript

   function display(e){
    if (e.checked)
        document.getElementById('yourDiv').style.display = 'block';
    else
        document.getElementById('yourDiv').style.display = 'none';
    }

更好的方法（感谢What）

HTML

<input id="more" type="checkbox">Add More Users</input>
<div id="yourDiv"> ...other form... </div>

JavaScript

window.onload = function () {
    document.getElementById('more').onclick = function () {
        if (this.checked)
            document.getElementById('yourDiv').style.display = 'block';
        else
            document.getElementById('yourDiv').style.display = 'none';  
    }
}

【讨论】：

onclick 不应该是 displayElement(this) 吗？而且你不应该使用内联 javascript - css.dzone.com/news/why-inline-css-and-javascript- - 使用事件处理程序
快进 5 年，现在每个人都在通过一种名为 JSX 的 HTML 上的奇怪标记语言使用内联 JS...

【解决方案2】：

您需要为此使用脚本。

首先将要显示/隐藏的表单放在<div id="myForm"> 标记中并用

括起来

然后使用jQueryhttp://www.jquery.com（下载jquery库并将其链接到您的页面并在页面加载时添加一个事件以运行一个函数来检查组合框是否被选中然后执行：

("#myForm").toggle();

【讨论】：

你不需要额外的 div - 你可以直接在表单元素中添加一个 id

【解决方案3】：

您可以使用 .clone() 和 .append()（需要 jQuery）。你给了 name 属性，比如

<input type="text" name="test[]" />

【讨论】：