javascript - 在 html 中隐藏/显示表单?

标签 javascript html css forms

我是 html 的新手,我试图在用户勾选一个框时隐藏/显示表单,表单出现在其下方。

我有一个表格,例如

Name : 
Username : 
Add More Users: (tickbox) 

如果用户勾选“添加更多用户”,则其下方会出现另一个包含“姓名、用户名、添加更多用户”字段的表单。这怎么可能?

最佳答案

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

关于javascript - 在 html 中隐藏/显示表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7401010/

相关文章:

javascript - 如何用 jQuery 复选框替换数组中的值

javascript - 使用 P5 javascript 从图像生成调色板

javascript - 如何在纯 javascript 或 vanilla js 中绑定(bind)双向数据?

html - 与 CSS 标志形状背景的链接

html - 负边距的概念 - 我理解了吗?

html - 修改 block 内的元素——修饰符正确

javascript - AngularJS - Google Chrome 扩展程序中的动态链接断开

html - 如何使用 ColdFusion 将 BASE64 编码的 HTML 转换为 GIF?

html - 固定边距和宽度的位置 100% 错误

html - ul li 内图像的垂直对齐