JS function applies checkbox value not immediately for IE

Another one cross-browser issue.

JS logic:

if one specific check-box is checked,that dependent ones are checked automatically and vice versa,if this check-box is unchecked ,that dependent unchecked also:

function changeStatusCheckBox(statusCheckbox) {
    if (statusCheckbox.id == "id1") {
        if (sta开发者_开发技巧tusCheckbox.checked == true) {
            document.getElementById("id2").checked = true;
            document.getElementById("id3").checked = true;

        } 
        else {
            document.getElementById("id2").checked = false;
            document.getElementById("id3").checked = false;

        }
    }
}

FF is OK - check/uncheck performed immediately.

IE7 check/uncheck works after clicked on some other browser area.

It looks like IE expects for additional blur behaviour.

JS called from this .jsf:

<h:selectBooleanCheckbox id="id1"
value="#{payment.searchByPaymentCriteria}"  onchange="javascript:changeStatusCheckBox(this);"/>

What is your opinion?

Thank you for assistance.

Internet Explorer and some other browsers also works like this. The onchange event is called only when the blur occours and something changed. Text inputs and select combos are also like this.

The better way to do that with checkboxes, crossbrowser, is to bind it to the onclick event. The onclick is called right after the mouseup event, so the checkbox status(checked or not) would be changed when the function is called.

Just do like

<h:selectBooleanCheckbox id="id1" value="#{payment.searchByPaymentCriteria}"  onclick="javascript:changeStatusCheckBox(this);"/>

The way I like to this is to trap the click event only in IE, and blur/focus the checkbox. That will fire the change event in IE, and you can continue to use the change event for other browsers that support it. Click is not the same, and could introduce other issues. (Example utilizes $.browser from jQuery and assumes jQuery is included on the page.) Same example would work for radio buttons (substitute :radio for :checkbox).

function fixIEChangeEvent (){
    if ($.browser.msie && $.browser.version < 9) {
        $("input:checkbox").bind("click", function () {
            this.blur();
            this.focus();
        });
    }
}