在html中隐藏/显示表单？

我是新来的HTML和即时通讯试图隐藏/显示表单，如果用户勾选一个窗体出现在下面的框。在html中隐藏/显示表单？

我有一个表格，例如

Name : 
Username : 
Add More Users: (tickbox)

如果用户蜱它下面的“添加更多用户”，另一种形式的字段的名称，用户名，添加更多的用户“出现。这怎么可能？

来源

2011-09-13 Spike Lee

你使用jQuery？ –

您需要为此使用脚本。

首先把你想显示/隐藏一个<div id="myForm">标签内，并与

然后附上它使用jQuery http://www.jquery.com形式（下载jQuery库，并将其链接到您的网页，并在添加事件页面加载运行功能检查，如果被选中组合框，然后执行：

("#myForm").toggle();

来源

2011-09-13 11:27:23 Ahmad

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

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

来源

2011-09-13 11:28:05 Simone

不应该onclick是displayElement（this）？而且你不应该使用内联javascript - http://css.dzone.com/news/why-inline-css-and-javascript- - 使用事件处理程序代替 – whostolemyhat

快进5年，现在大家都在使用内联JS通过称为JSX的HTML顶部的奇怪标记语言... – Simone

您可以使用.clone（）和.append（）（需要jQuery）。你有给名称属性像

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

来源

2011-09-13 12:01:35 ahmetertem

在html中隐藏/显示表单？

回答

相关问题