Get the value of the radio button that was selected before the user selects a new one

问题

If I have 3 radio buttons, is there a way through jQuery of finding out the value of the one that was selected before the user clicks a new one?

<div id="radio-group">
    <input type="radio" id="radio-1" name="radios" value="1" checked="true" />
    <input type="radio" id="radio-2" name="radios" value="2" />
    <input type="radio" id="radio-3" name="radios" value="3" />
</div>

In the example avove, if the user clicks on radio-3, I need a way to get 1, so that I can carry out some formattion to it. Thanks.

回答1:

I would save the pressed values to an array and edit hidden value with that.

http://jsfiddle.net/BQDdJ/6/

HTML

<div id="radio-group">
    <input type="radio" id="radio-1" name="radios" value="1" checked="true" />
    <input type="radio" id="radio-2" name="radios" value="2" />
    <input type="radio" id="radio-3" name="radios" value="3" />
    <input type="hidden" id="radio-previous" name="radio-previous" />
</div>​

JavaScript

$(document).ready(function(){
    var clicks = new Array();
    clicks[0] = 1 //this should be the default value, if there is one

    $('input[name$="radios"]').change(function(){
       clicks.push($(this).val()) 
       $('#radio-previous').val(clicks[clicks.length-2])
    })
})

​

回答2:

You can use mouseup and change event. In mouse up you will get the value of radio button that is selected before selecting other radion button and change event will give the new selection of radio button.

Live Demo

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

回答3:

I had the same issue when trying to make a budget calculator with options, I solved it using a a var to hold the last value;

            var before = -1;
            $('input:checkbox, input:radio').click(function() {
                // +(str) =  number(str)
                var value = +$(this).val();
                if ($(this).is(":checkbox")) {
                    if ($(this).is(":checked")) {
                        total += value;
                    } else {
                        total -= value;
                    }
                }
                else {
                    if (before < 0) {
                        total += value;
                        before = value;
                    } else {
                        total -= before;
                        total += value;
                        before = value;
                    }
                }
                $("#sub-total").text(total * hourly_rate);
                if ($(this).is("[data-toggle]")) {
                    $("#" + $(this).attr("data-toggle")).slideToggle("fast");
                }
            });

回答4:

"It's been a while" would be an euphemism but in case someone stumbles upon this issue:

Adil pointed me in the right direction, however mouseup only works for mouse-triggered events (duh), so I tried with focus and, since it also happens before change event, it works with, both, mouse and keyboard inputs (like when you change the radios status using the tab and arrow keys). So to gain access to the previously selected/checked item before the user interaction you use focus and to get the current item you use your good old change:

//html
    <input type="radio" id="radio-1" name="radios" value="1" />
    <input type="radio" id="radio-2" name="radios" value="2" />

//js
    //if currently checked item is radio-1
    $('[name=radios]').on('focus', function() {
        console.log($('[name="radios"]:checked').val()); //outputs 1
    });
    $('[name=radios]').change(function() {
        console.log($('[name="radios"]:checked').val()); //outputs 2
    });

回答5:

Just to complete #Adil's answer, if you have radios with text, if the user clicks the text, the previousRadio doesn't get updated. You can use the following:

<label>
   <input type="radio" name="radioName">
   text
</label>

And js:

var $previousRadio;
var $inputs = $('input[name=radioName]');
$inputs.parents("label").mouseup(function () {
    $previousRadio = $inputs.filter(':checked');
});
$inputs.change(function () {
    alert($previousRadio.val());
});

来源：https://stackoverflow.com/questions/11052702/get-the-value-of-the-radio-button-that-was-selected-before-the-user-selects-a-ne