How to make jquery manipulation and box check/uncheck work on IE6?_问答_开发者

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=开发者_如何学JAVA"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>

checked is a boolean attribute in XHTML. While in your XHTML, you write the attribute as checked="checked", javascript exposes this property as a boolean value element.checked.

Use true or false to check or uncheck the checkbox.

$(this).attr('checked', true);  //Check
$(this).attr('checked', false); //Uncheck

Alternatively, you may also remove the attribute to uncheck the box.

$(this).removeAttr('checked');  //Uncheck

Setting it to an invalid value will not uncheck the box in IE6 (and frankly, strangely enough, its the only browser on-spec for that aspect. Any string is still true versus an empty one false).

checked Property (INPUT type=checkbox, INPUT type=radio, HTMLInputElement Constructor)

In IE6 use the property defaultChecked.

this should work

var checkItem = function(){
 toggleItem(this, checkItem, uncheckItem);
 //$(this).attr({"checked":"checked"});
 $(this).attr({"defaultChecked":true});
 $("#checked").prepend($(this).parent());
};

var uncheckItem = function(){
 toggleItem(this, uncheckItem, checkItem);
 //$(this).attr({"checked":"unchecked"});
 $(this).attr({"defaultChecked":false});
 $("#unchecked").append($(this).parent());
};

I'm having a little difficulty understanding your question, but to uncheck something with jQuery just use:

$(this).removeAttr('checked');

This seems to be a IE6 bug with checkbox + document-fragment (the fragment is used by jQuery internally when you do the append stuff)

Check this page for a description of a whole list of inconsistencies

DOM & checkbox(checked status)

Although I'm not yet entirely sure why this is happening you can use this workaorund in the meantime.

var checkItem = function(){
    var ele = $(this).parent().clone(true);
    toggleItem(ele.find("input").get(0), checkItem, uncheckItem);
    ele.prependTo($("#checked"));
    $(this).parent().remove();
};

var uncheckItem = function(){
    var ele = $(this).parent().clone(true);
    toggleItem(ele.find("input").get(0), uncheckItem, checkItem);
    ele.appendTo($("#unchecked"));
    $(this).parent().remove();
};

btw. you could shorten your code (+get rid of toggleItem) if you use live

var helper = function(elem, container) {
    var par = $(elem).parent();
    if(container.attr("id") == "unchecked")
        par.clone(true).prependTo(container);
    else
        par.clone(true).appendTo(container);
    par.remove();
}

var checkItem = function(){
    helper(this, $("#checked"));
};

var uncheckItem = function(){
    helper(this, $("#unchecked"));
};

$(document).ready(function(){
    $("#checked input").live("click", uncheckItem);
    $("#unchecked input").live("click", checkItem);
});