將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