如何使用javascript动态创建复选框列表 [英] How to create list of checkboxes dynamically with javascript
问题描述
更新：代码已根据Dan的评论更新。
UPDATE: Code has been updated per Dan's comments.
我正在处理的项目有问题。我需要根据在上面的选择下拉菜单中选择的内容创建复选框的列表。我想为此使用javascript。我能够创建一个选择下拉取决于上面的选择，但客户端需要复选框。我认为这将基本上做同样的方式，除了这个时候复选框，但我不能让它工作。我通常使用PHP我的编程，因此不太了解JavaScript太好。这里是我必须使选择下拉...的代码。什么会是最好的方法，使它的复选框的列表？请注意，此代码已大大减少，以便于阅读（只有重要的部分在这里）。
I have a problem with a project I'm working on. I need to create a list of checkboxes depending on what is selected in a select dropdown above. I would like to use javascript for this. I was able to create a select dropdown dependent on the select above but the client wants checkboxes instead. I figured it would be essentially done the same way, except making checkboxes this time, but I can't get it to work. I usually use php for my programing and therefore don't know javascript too well. Here is the code I have to make the select dropdown.... what would be the best way to make it a list of checkboxes instead? Please note that this code has been greatly reduced to keep it easy to read (only the parts that matter are here).
代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function populate(slct1,slct2){
var s1 = document.getElementById(slct1);
var s2 = document.getElementById(slct2);
s2.innerHTML = "";
if(s1.value == "Cat1"){
var optionArray = ["Subcat1","Subcat1.1","Subcat1.2"];
} else if(s1.value == "Cat2"){
var optionArray = ["Subcat2","Subcat2.1","Subcat2.2"];
} else if(s1.value == "Cat3"){
var optionArray = ["Subcat3","Subcat3.1","Subcat3.3"];
}
for(var option in optionArray){
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var newOption = document.createElement("option");
newOption.value = pair;
newOption.innerHTML = pair;
s2.options.add(newOption);
}
}
}
</script>
</head>
<body>
<h2>Dynamic Select Dropdown</h2>
<hr />
Choose a Category:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Cat1">Cat1</option>
<option value="Cat2">Cat2</option>
<option value="Cat3">Cat3</option>
</select>
<hr />
Choose Subcategory:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>
任何帮助将非常感谢，如果你需要帮助，我会尽力偿还。
Any help would be greatly appreciated and I would try my best to repay the favor if you ever needed help with any development.
推荐答案
复选框是一个简单的输入元素 type ='checkbox' code>。所以你必须准备至少两件事：一个文本节点的盒子的描述和盒子本身。在这种情况下，还可以使用< label> 元素来包含之前提到的两个内容：
A checkbox is a simple input element with type='checkbox'. So you have to prepare at least two things: a text node for the description of the box and the box itself. In this case it's also good to use a <label> element to include both things mention before:
// create the necessary elements
var label= document.createElement("label");
var description = document.createTextNode(pair);
var checkbox = document.createElement("input");
checkbox.type = "checkbox"; // make the element a checkbox
checkbox.name = "slct[]"; // give it a name we can check on the server side
checkbox.value = pair; // make its value "pair"
label.appendChild(checkbox); // add the box to the element
label.appendChild(description);// add the description to the element
// add the label element to your div
document.getElementById('some_div').appendChild(label);
您必须对每一对执行上述步骤。请注意，在填充之前，您必须清除给定的< div id =some_div>< / div> ：
You have to do the steps above for every pair. Note that you have to clear the given <div id="some_div"></div> before you populate it:
// clear the former content of a given <div id="some_div"></div>
document.getElementById('some_div').innerHTML = '';
这篇关于如何使用javascript动态创建复选框列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
