Use a checkbox to toggle the display of a page element (IE7 problems!)

Question

When users check the "My shipping address and billing address are the same" checkbox, I want to hide the shipping address form.

This code works well in everything except IE:

$("#order_shipping_same_as_billing").change(function() { 
  $("fieldset.shipping").toggle("blind", { 'direction' : 'vertical' }, 50);
});

IE doesn't register the change event until the checkbox loses focus, which makes for an unpleasant user experience.

Many shopping sites (and non-shopping sites!) do stuff like this -- there must be a cross-browser compatible method that I'm missing.

Answer 1

Use the click event instead of change event. It will also be triggered even when the checkbox changes in another way than clicking with the mouse.

Answer 2

I usually use the click event for checkboxes instead of change. That way it works in IE as well.

$("#order_shipping_same_as_billing").click(function() { 
  $("fieldset.shipping").toggle("blind", { 'direction' : 'vertical' }, 50);
});