Given a set of radio buttons, like:

<input id="B_1" type="radio" name="radioName" value="1">
<input id="B_2" type="radio" name="radioName" value="2">
<input id="B_3" type="radio" name="radioName" value="3">
<input id="B_4" type="radio" name="radioName" value="4">

​When one of them gets checked is it possible to know which was previously active (if there is one)?

I tried to attach the following function to the onclick event, but it doesn't work because it returns the the presently selected radio button instead of the one that was selected before:

my_func = function() {
    var checkedValue = $('input[type=radio]:checked').val();
    return alert("The previously selected was: " + checkedValue);
  };

I don't know if could be of any help, anyway here's the plete attempt: /

Given a set of radio buttons, like:

<input id="B_1" type="radio" name="radioName" value="1">
<input id="B_2" type="radio" name="radioName" value="2">
<input id="B_3" type="radio" name="radioName" value="3">
<input id="B_4" type="radio" name="radioName" value="4">

​When one of them gets checked is it possible to know which was previously active (if there is one)?

I tried to attach the following function to the onclick event, but it doesn't work because it returns the the presently selected radio button instead of the one that was selected before:

my_func = function() {
    var checkedValue = $('input[type=radio]:checked').val();
    return alert("The previously selected was: " + checkedValue);
  };

I don't know if could be of any help, anyway here's the plete attempt: http://jsfiddle/H6h4R/

• javascript
• jquery
• jquery-ui
• radio-button

Share Follow asked Jul 21, 2012 at 10:19 Rik PoggiRik Poggi 29.3k77 gold badges6868 silver badges8484 bronze badges 1

• You have to rethink here. Everytime you click on a new radio - the checkValue just fills with the one you clicks. – Andreas Nilsson Commented Jul 21, 2012 at 10:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Try this - http://jsfiddle/H6h4R/1/

$(":radio").on("mousedown", function() {
    $("p").text( $('input[type=radio]:checked').val() );
}).on("mouseup", function() {
    $('input[type=radio]').prop('checked', false);
    $(this).prop('checked', true);
});

The click event is only triggered after this exact series of events:

• The mouse button is depressed while the pointer is inside the element.
• The mouse button is released while the pointer is inside the element.

if he uses keyboard key this can help with that

http://jsfiddle/DYrW3/73/

$('input[name=radios]').keydown(function(){
        alert("Before change "+$('input[name=radios]:checked').val());
})