radio button change only after confirm() returns true

Question

I've got a set of radio buttons in my html site. When the users changes the selection I show a dialog via the confirm('') function. I just want to change the selection if the user confirms the change - otherwise just cancel the event. My problem now is that I only got an event AFTER the value has been changes and the change is already done. How can i prevent this behaviour?

Answer 1

$('.rdio').click(function(){
 var cnfrm = confirm('Are you sure?');
 if(cnfrm != true)
{
 return false;
}

})​

live demo : http://jsfiddle.net/cTzVg/

Answer 2

This isn't easy because there is no consistency across browsers in which event is appropriate to do what you need doing. However you say from your tags you're using jQuery, so here's a solution using state tracking to revert depending on your function return:

var currentradio= $("input[name='pick_up_point']:checked")[0];
$("input[name='pick_up_point']").change(function(event) {
    var newradio= $("input[name='pick_up_point']:checked")[0];

    if (newradio===currentradio)
        return;
    if (confirm('Your question here')) {
        currentradio= newradio;
    } else {
        currentradio.checked= true;
    }
});