[英]convert Multiple checkbox in html to javascript code
i try to convert this Multiple check-box 我尝试转换此多个复选框
<fieldset data-role="collapsible">
<legend>Pick your Color</legend>
<div data-role="controlgroup">
<label for="Red">Red</label>
<input type="checkbox" name="favcolor" id="Red" value="Red">
<label for="Green">Green</label>
<input type="checkbox" name="favcolor" id="Green" value="Green">
<label for="Blue">Blue</label>
<input type="checkbox" name="favcolor" id="Blue" value="Blue">
</div>
</fieldset>
to array and javascript code like this: 数组和JavaScript代码是这样的:
<script>
var myArray1, row;
myArray1 = new Array("red", "green", "blue", "pink", "black", "yellow");
function ZZ()
{
var i;
$("#ZIBI").empty();
for (i = 0; i < myArray1.length; i++)
{
ALL =
'<label for=' + row + '>' + row + '</label>' +
'<input type="checkbox" id=' + row + ' value=' + row + '>'
row = myArray1[i];
$("#ZIBI").append(ALL);
}
}
</script>
and html: 和html:
<fieldset data-role="collapsible">
<legend>Pick your color</legend>
<div data-role="controlgroup" id="ZIBI">
</div>
</fieldset>
the problem are 问题是
Edit: 编辑:
ugly: 丑陋:
http://jsfiddle.net/z8pv99eq/ http://jsfiddle.net/z8pv99eq/
nice: 不错:
The problem is that you creating your DOM after load, so jQuery code to style DOM has already finished. 问题是您在加载后创建了DOM,因此样式DOM的jQuery代码已经完成。 You must change to
No wrap - in <body>
on jsfiddle, and change code to something like this: 您必须在jsfiddle上的
No wrap - in <body>
更改为No wrap - in <body>
wrap-,并将代码更改为如下所示:
var myArray1, row;
myArray1 = new Array("red", "green", "blue", "pink", "black", "yellow");
var i;
$("#ZIBI").empty();
for (i = 0; i < myArray1.length; i++)
{
row = myArray1[i];
ALL =
'<label for=' + row + '>' + row + '</label>' +
'<input type="checkbox" id=' + row + ' value=' + row + '>'
$("#ZIBI").append(ALL);
}
demo: http://jsfiddle.net/tha2bbt7/ 演示: http : //jsfiddle.net/tha2bbt7/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.