IE not rendering change in element display after changing it with javascript

Question

Situation:

I have a check box and a div container inside another div container. When the check box or the label for the check box is clicked, the inner div's display style should change. If the display is set to block, then it should change to none and vice versa.

Code:

HTML:

<input id="oper_sale" type="checkbox" name="oper_sale" onchange="show_hide_operation(this, 'sale_block');">
<label for="oper_sale" class="public">Venta:</label>
   <div id="sale_block" name="sale_block" style="display: none;">
         AAAAAAA
   </div>

Javascript:

// Show or hide parts of a form
function show_hide_operation (oper_choice, oper_block_id) {
    var oper_block = document.getElementById(oper_block_id);
    if (oper_choice.checked == true)
     oper_block.style.display = "block";
    else
     oper_block.style.display = "none";
}

Problem:

This works fine in Firefox, but in IE it does not. When I click on the check box or its label, nothing happens. But, if I click anywhere else on the screen after clicking on the check box or its label, the change happens without a problem. I tried blurring the check box after it is click but it did not help.

In short:

IE does not render the change in display style until the user has click on a different part of the screen than what called the java script to change the style

Any help is greatly welcomed

Answer 1

IE doesn't fire .onchange for checkboxes until it loses focus, you may want to use the .onclick event here.

Answer 2

Use the onclick event, the change event in IE executes after the element loses focus.

Check this example.

Answer 3

In IE the onchange event obviously happens when the focus leaves the control, just as with an input with type="text".

Use the onclick event instead.