Question

我正在尝试动态添加一些字段。例如，当用户单击复选框或单选按钮时，将出现一些额外的字段（按钮，文本字段等）。我是否可以使用onClick执行此操作，如果是，我该怎么办？

谢谢！

Answer 1

网站上已有按钮，只需使用以下形式隐藏它们：

<button style="display: none"></button>

然后你可以展示它们并根据需要隐藏它们。

赞成

您可以预先设置按钮，文本字段等的样式，并通过CSS将其放入网站中
您可以使用隐藏元素的其他功能删除它们
没有凌乱的JS

缺点

没有......

实施示例

<html>
    <head>
        <title>My Page</title>
        <style>
            #button2 {
                display: none;
            }
        </style>
    </head>
    <body>
        <button onclick="show('button2')">Click Me!</button>
        <button id="button2">Click Me!</button>
        <script>
            function show(element) {
                document.getElementById(element).style.display = block;
            }
        </script>
    </body>
</html>

Answer 2

最简单的方法，

让您想要在html中预编码但使用css隐藏的元素。

例如：

＆＃13;

 // If enyone "change" the magic checkbox, ... I will know it
document.getElementById('magic_checkbox').addEventListener('change', function(){

	// Is it checked... because if it is,
	// I should show the more inputs
	if(this.checked){
		document.getElementById('some_more_data').style.display = "block";
	}

	// If it is unchecked
	// I should hide them
	else{
		document.getElementById('some_more_data').style.display = "none";
	}

}, false);

＆＃13;

<!-- The mahic check box -->
<input id="magic_checkbox" type="checkbox" name="something" value="a_value"> Do you want more?<br>

<!-- My hidden inputs -->
<div id="some_more_data" style="display:none;">
	<input type="text" name="other_data_no1" value="Yeah!"><br>
	<input type="text" name="other_data_no2" value="Fill me!">
</div>

<!-- Some other data -->
<input type="number" name="something_else" value="123"><br>

＆＃13;

Answer 3

你可以。此代码复制形式为：http://www.forbes.com/powerful-brands/list/

p["last name"] = "Smith";

Javascript动态添加字段（onClick）

3 个答案:

赞成

缺点

实施示例