我在 abc 中有一个由 3 个项目(值 1、2 和 3)组成的数组，我想在我的 html 中显示相同的内容，其中包含 3 个复选框，每个复选框都有一个值。
<script type="text/javascript">
function populate(demo) {
var abc = [1,2,3];
var s1 = document.getElementById(demo);
}
for (var option in abc) {
if (abc.hasOwnProperty(option)) {
var pair = abc[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
abc.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s1.appendChild(label);
s1.appendChild(document.createElement("br"));
}
}
}
</script>
</head>
<body>
Show checkboxes
<div id="demo" onload="populate('demo')"></div>
</body>
fiddle :http://jsfiddle.net/7n9w6kfm/1/
但在 HTML 中，它显示为 1,2,3 我如何用 3 个值为 1,2 和 3 的复选框来显示它们
最佳答案
由于您没有任何创建元素的尝试，但您对如何创建元素感兴趣，我将将此作为答案发布。
您可以使用document.createElement()Click here for documentation
If you assign document.createElement() to a variable you can use that variable to apply attributes within javascript
document.createElement("[Type Of Element]");
示例:document.createElement("div"); 将创建一个 div 元素。
分配给变量(NewDiv):var NewDiv=document.createElement("div");
现在您可以应用其他属性，如下所示。
var NewDiv= document.createElement('div');
NewDiv.setAttribute('id','SomeRandomID');
NewDiv.setAttribute('class','SomeClass');
document.body.appendChild(NewDiv);
如果您想将新元素插入到特定元素/div/span，您可以使用
var target=document.getElementById('ElementID');
target.appendChild(NewDiv);
我希望这对您有所帮助，如果您在理解方面有任何问题，请告诉我，我将更新答案以更详细地解释。
Additional Information: this will create multiple elements if you place this into a for loop Click here for documentation
祝你编码愉快!
Changes to your source code below
function populate() {
/*-------------^^Demo^^ not needed, you have the element by ID below.*/
var abc = [1,2,3];
var s1 = document.getElementById('demo');
for (var option in abc) {
if (abc.hasOwnProperty(option)) {
var pair = abc[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
s1.appendChild(checkbox);
/*----------^^ Change to s1, abc is an array, not an element--------*/
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s1.appendChild(label);
s1.appendChild(document.createElement("br"));
}
}
}
window.onload=populate;<div id="demo"></div>如果你想运行onload函数，你需要在body标签上应用onload=""或者在javascript中使用window.onload=FunctionName。
关于javascript - 分割字符串并用复选框显示结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28951923/