如何通过JavaScript创建新的HTML复选框

How to create a new HTML checkbox via JavaScript?

本文关键字：HTML 复选框 创建 何通过 JavaScript      更新时间：2023-09-26

我在HTML中定义了一个按钮，它调用一个函数在JS中创建一个对象。此外，我希望这个按钮可以在HTML中"生成"一个新复选框（名称和值取决于以前创建的对象），比如在div id XY中。

虽然我想这并不重要，但这是我目前的东西。

html

<input id="button" value="pick Brakiri" onclick="initiate('Brakiri')">

js

function initiate(faction){
calc = new Calc(faction)
}

如果可能的话，我想避开jQuery。

谢谢。

您应该为此创建一个函数。下面的一个示例，您传入name和id，它返回一个全新的元素：

function createNewCheckboxt(name, id){
    var checkbox = document.createElement('input'); 
    checkbox.type= 'checkbox';
    checkbox.name = name;
    checkbox.id = id;
    return checkbox;
}

之后，您只需要选择将其添加到DOM中的位置。类似于：

form.appendChild(createNewCheckboxt('theName', 'theID'));

嗨，我不确定我是否理解你的问题，但这是通过javascript:创建新复选框的代码

var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";    
container.appendChild(checkbox);

您可以使用document.createElement()方法创建具有type="checkbox"的<input>元素。

这将起作用：

<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a Checkbox.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    x.setAttribute("value", "abc");
    x.setAttribute("name", "xyz");
    document.body.appendChild(x);
}
</script>
</body>
</html>

参考

相关文章：