Question

我在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>

小提琴：http://jsfiddle.net/7n9w6kfm/1/

但在HTML中显示为 1,2,3 如何显示3个带有值1,2和3的复选框

Answer 1

由于您没有尝试创建元素，但您对如何创建元素感兴趣，我会将其作为答案发布。

您可以使用document.createElement() Click here for documentation

如果将document.createElement（）分配给变量，则可以使用该变量在javascript中应用属性 document.createElement(" [元素类型] ");

示例：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);

我希望这会对你有所帮助，如果你有任何问题需要了解，请告诉我，我会更新答案以便更详细地解释。

附加信息：如果您将其置于for循环中，则会创建多个元素Click here for documentation

快乐的编码！

下面的源代码更改

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，你需要将onload =“”应用于body标签或在javascript中使用window.onload=FunctionName。

拆分字符串并使用复选框显示结果

1 个答案: