Question

I have two radio buttons each with a unique ID. When one is clicked, I would like to add $10 to a total. When the other is clicked, we go back to the original total price. My jquery looks like this:

function check_ceu() {
    var price = <%= conference_price %>;
    if($('#ceu_yes').is(':checked')){
            $('#total').val(parseFloat(price) + 10)
        }
        else{
            $('#total').val(price)
        }       
}

I have this function bound to document.ready (for page refreshes) and also the onchange handler of the radio buttons.

In FF and Chrome this works fine. In IE, when the radio button with ID of “ceu_yes” is checked nothing happens, then when clicking back to the other radio button, 10 is added. So in essence, IE has the checkbox functionality reversed. Below is my code for the buttons:

<input type="radio" name="ceu" id="ceu_yes" value="1" onchange="check_ceu()" /> $10
<input type="radio" name="ceu" id="ceu_no" value="0" checked="checked" onchange="check_ceu()" /> No, thank you

Any ideas on this?

Answer 1

IE’s ‘change’ event handler is messed up. It doesn’t fire when expected.
(http://webbugtrack.blogspot.com/2007/11/bug-193-onchange-does-not-fire-properly.html)

If you change your logic to attach to the ‘click’ event on your radio button, you will get the effect that you want.

NB. Nicely enough, the click event still fires properly when you tab into the field and manipulate it using the spacebar on the keyboard, so no functionality is lost.