Hi John,
It looks like IE doesn't send a change event when the checkbox has
been clicked, only after the element has lost focus. You can test this
by adding a debug alert to your change function.
change your
$("input:checkbox").change(function () {...
line to
$("input:checkbox").bind("change click keypress", function(){...
to catch the checkbox every time it has been clicked (either with
mouse or keyboard)
by(e)
Stephan
2009/2/10 John C <j.cashm...@wigan.gov.uk>:
>
> 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>
> --
>
