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.
When I try and submit the variblse the value for the checkboxes are stored as "on". I've noticed there is an additional attribute that gets rendered (IE only) called jQuery1288631121994 which stores the real value. It seems like jquery is trying to manage the state of checkboxes but I cant seem to access the stored values?
Here is my test example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var state = {
Professions: [1]
};
$(document).ready(function () {
var data = [{ "ID": 1, "Name": "Football" }, { "ID": 2, "Name": "Cricket" }, { "ID": 3, "Name": "Hockey"}];
$.each(data, function () {
var catid = this['ID'];
var catname = this['Name'];
var selected = $.inArray(catid, state.Professions) != -1 ? true : false;
$("<li></li>")
.append(
$("<input></input>").attr({
id: 'category' + catid
, name: 'categories'
, value: catid
, type: 'checkbox'
, checked: selected
})
.click(function (event) {
//alert($(this)[0].value);
})
)
.append(
$(document.createElement('label')).attr({
'for': 'category-' + catid
})
.text(catname)
)
.append(
$("<div></div>").addClass("clear")
)
.appendTo("#ProfSelector ul");
});
$("#btnTest").click(function () {
alert($("#ProfSelector input:checkbox:checked").val());
});
});
</script>
</head>
<body>
<div id="ProfSelector">
<ul>
</ul>
</div>
<a href="#" id="btnTest">Test</a>
</body>
</html>
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);
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 }));
});
});
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(',');
来源：https://stackoverflow.com/questions/4071289/value-of-jquery-generated-checkbox-in-ie8-is-stored-as-on-rather-than-actual-v