Value of jQuery generated checkbox in IE8 is stored as “on” rather than actual value?

Question

The following example code works in FireFox but IE is causing problems.

This code essentially renders a list of dynamic checkboxes according to a JSON array.

Whe

Answer 1

I find the .map function to be useful for this scenario. No need to strip off a trailing ',' with this usage.

$('#ProfSelector input:checkbox:checked').map(function() {
  return this.id;
  // or jquery object 
  // return $(this).val();
}).get().join(',');

Answer 2

It would seem IE does not like the way the checkbox attributes are set; if that is changed to the following IE is happy: http://jsfiddle.net/tS3cs/

$("<li></li>")
.append(
    '<input id="category'+catid+'" value="'+catid+'" type="checkbox"></input>'
)
.append(
    $(document.createElement('label')).attr({
        'for': 'category-' + catid
    })
    .text(catname)
)
.append(
    $("<div></div>").addClass("clear")
)
.appendTo("#ProfSelector ul");

$('#category'+catid).attr('checked',selected);

Answer 3

I found a solution for anyone whom is interested. It's more of a work around as I couldn't figure out why it was happening.

On creating each input element instead of popuating the value field which just gets set to 'on' in IE when using jquery 1.4. I created a val attr for each element and store the category id. Then I simply call this code on submit to harvest the results.

$(document).ready(function() {
        $("form").submit(function(){

            var str = "";
                $("#ProfSelector input:checkbox:checked").each(function () {
                    str += $(this).attr("val") + ",";
                });

            $("form").append( $("<input></input>").attr({ "type":"text", "name":"selectedCategories", "value":str }));
        });
    });