convert Multiple checkbox in html to javascript code

Question

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:

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

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

the problem are

its look small and ugly (the checkbox) - Why it does not look as beautiful as the first example ?
If I chose several items how to identify them ?

Edit:

ugly:

http://jsfiddle.net/z8pv99eq/

nice:

http://jsfiddle.net/2eam987t/

Answer 1

The problem is that you creating your DOM after load, so jQuery code to style DOM has already finished. You must change to No wrap - in <body> on jsfiddle, and change code to something like this:

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/

convert Multiple checkbox in html to javascript code

Question

1 answers

solution1
0 ACCPTED 2014-08-10 10:21:54

convert Multiple checkbox in html to javascript code

Question

1 answers

solution1 0 ACCPTED 2014-08-10 10:21:54

solution1
0 ACCPTED 2014-08-10 10:21:54