Question

我是html的新手，我试图隐藏/显示表单，如果用户勾选一个表格，其下方会显示一个表格。

我有一个表格，例如

Name : 
Username : 
Add More Users: (tickbox)

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

Answer 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';  
    }
}

Answer 2

您需要使用脚本。

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

括起来

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

("#myForm").toggle();

Answer 3

您可以使用.clone（）和.append（）（需要jQuery）。你有像

这样的名字属性

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

在html中隐藏/显示表单？

3 个答案: