将HTML中的多个复选框转换为javascript代码

Question

我尝试转换此多个复选框

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

数组和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>

和html：

<fieldset data-role="collapsible">
    <legend>Pick your color</legend>
         <div data-role="controlgroup" id="ZIBI">
     </div>
</fieldset>

问题是

它看起来又小又丑（复选框）-为什么它看起来不像第一个示例那么漂亮？
如果我选择了几个项目，如何识别它们？

编辑：

丑陋：

http://jsfiddle.net/z8pv99eq/

不错：

http://jsfiddle.net/2eam987t/

Answer 1

问题是您在加载后创建了DOM，因此样式DOM的jQuery代码已经完成。 您必须在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);
}

演示： http : //jsfiddle.net/tha2bbt7/

将HTML中的多个复选框转换为javascript代码

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-08-10 10:21:54

将HTML中的多个复选框转换为javascript代码

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-08-10 10:21:54

解决方案1
0 已采纳 2014-08-10 10:21:54