On the following page (see code at end) when I click on the checkbox "A", on most browsers, it goes under the horizontal rule, unchecked. On IE6, it goes under the horizontal rule, but keeps checked. I would like to have the same behaviour in IE6 as in the other browsers. I tried to add
$(this).attr({"checked":"unchecked"});
but it is not better. Any solution?
Here is the code of the page:
<html>
<head>
<title>test check</title>
<script src="shoppinglist_fichiers/jquery-1.js"></script>
<script type="text/javascript">
var toggleItem = function(o, toUnbind, toBind){
var selector = $(o);
selector.unbind("click", toUnbind);
selector.bind("click", toBind);
};
var checkItem = function(){
toggleItem(this, checkItem, uncheckItem);
//$(this).attr({"checked":"checked"});
$("#checked").prepend($(this).parent());
};
var uncheckItem = function(){
toggleItem(this, uncheckItem, checkItem);
//$(this).attr({"checked":"unchecked"});
$("#unchecked").append($(this).parent());
};
$(document).ready(function(){
$("#checked input").bind("click", uncheckItem);
$("#unchecked input").bind("click", checkItem);
});
</script>
</head>
<body>
<form id="listForm" action="list" method="post">
<span id="checked">
<span id="A">
<input autocomplete="off" value="A" name="list" checked="checked" type="checkbox">A<br>
</span>
</span>
<hr/>
<span id="unchecked">
</span>
</form>
</body>
</html>