javascript - Display the value on click of check box in an array -

i have array of 10 checkboxes. onclick of checkbox want value of particular checkbox. able achieve using code.when click in serial order working fine. when click on checkbox 5 after clicking on checkbox 7 value of checkbox 5 ie..5 getting added befor 7. dont want in order. want values displayed in whatever order click. js file follows

var selected = new array(); $(document).ready(function(){  checkboxtest();  });  function checkboxtest() {     alert("checkbox test");     for(i = 0; < 10; i++){         $("#catalog_table").append('<tr><td>checkbox<input type="checkbox"  name ="chkbox"  value="' +i+' "/><td></tr>');         test();     }   }  function test() {     $('#catalog_table input:checkbox').change(function() {     var emails = [];     $('#catalog_table input:checkbox:checked').each(function() {      emails.push($(this).val());     });     var textfield = document.getelementbyid("root");       textfield.value = emails;     });  }   

my html code

<table id="catalog_table"> </table> <textarea  id="root"></textarea>   

can 1 please tell me how this?

demo

its messy, works: http://jsfiddle.net/za7m8/1/

var selected = new array(); $(document).ready(function(){      $("input[type='checkbox']").on('change', function() {         // check if adding, or removing selected item         if ($(this).is(":checked")) {             selected.push($(this).val());         } else {             for(var = 0; i<selected.length;i++) {                 if (selected[i] == $(this).val()) {                     // remove item array                     selected.splice(i, 1);                 }             }         }          // output selected         var output = "";         (var o = 0; o<selected.length; o++) {             if (output.length) {                 output += ", " + selected[o];             } else {                 output += selected[o];             }         }         $("#root").val(output);     }); });