[jQuery] Delayed Checkboxes in IE

[jQuery] Delayed Checkboxes in IE


Has anyone any idea why the code below doesn't work correctly in IE.
Basically what is supposed to happen is when the parent checkbox is
checked the child ones are also supposed to be checked. This works
fine in FireFox and Safari, but not in Internet Explorer, the child
checkboxes only get checked when something else changes on the form,
for instance you check another item.
Any help would be great.
---
<div id="navigation">
<ul>
        <li><a href="test.htm">Item
                </a>
                <ul>
                        <li><a href="test.htm">Item</a></li>
                        <li><a href="test.htm">Item
                                </a>
                                <ul>
                                        <li><a href="test.htm">Item</a></li>
                                        <li><a href="test.htm">Item</a></li>
                                </ul>
                        </li>
                </ul>
        </li>
        <li><a href="test.htm">Item
                </a>
                <ul>
                        <li><a href="test.htm">Item
                                </a>
                                <ul>
                                        <li><a href="test.htm">Item</a></li>
                                        <li><a href="test.htm">Item
                                                </a>
                                                <ul>
                                                        <li><a href="test.htm">Item</a></li>
                                                        <li><a href="test.htm">Item</a></li>
                                                        <li><a href="test.htm">Item</a></li>
                                                        <li><a href="test.htm">Item</a></li>
                                                        <li><a href="test.htm">Item</a></li>
                                                </ul>
                                        </li>
                                </ul>
                        </li>
                        <li><a href="test.htm">Item</a></li>
                </ul>
        </li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#navigation>ul>li>a").each(function () {
    $(this).before($(this).text());
    $(this).remove();
    });
    var checknum = 0;
     $("#navigation a").each( function () {
    checknum = checknum +1;
    newInput = document.createElement("input");
    newInput.setAttribute("name","dchannel"+checknum);
    newInput.setAttribute("id","dchannel"+checknum);
    newInput.type = "checkbox";
    newInput.value = $(this).attr('href').replace(/'/ig, "\'");
    $(newInput).insertBefore(this);
    $("#dchannel"+checknum).val($("#dchannel"+checknum).val().replace
("http://boston", ""));
    newLabel = document.createElement("label");
    newLabel.setAttribute("for","dchannel"+checknum);
    newLabel.innerHTML = $(this).text();
    $(newLabel).insertBefore(this);
     $(this).remove();
});
$("input:checkbox").change(function () {
if($(this).attr("checked")) {
$(this).parents("li:first").find("input:checkbox").each(function () {
$(this).attr("checked", true);
});
} else {
$(this).parents("li:first").find("input:checkbox").each(function () {
$(this).attr("checked", false);
});
}
});
});
</script>
--