Obtener el valor del botón de opción que se seleccionó antes de que el usuario seleccione uno nuevo

Question

Si tengo 3 botones de opción, ¿hay alguna manera de descubrir el valor de uno seleccionado antes de que el usuario haga clic en un nuevo botón? ¿uno?

<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> 

En el ejemplo avove, si el usuario hace clic en radio-3, necesito una manera de conseguir 1, para que pueda llevar a cabo algunas formattion a ella. Gracias.

Answer 1

me ahorraría los valores prensadas a una matriz y editar el valor oculto con eso.

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]) 
    }) 
}) 

Answer 2

Puede usar el evento mouseup y change. En el mouse arriba obtendrá el valor del botón radio que se selecciona antes de seleccionar otro botón de radion y el evento change dará la nueva selección del botón radio.

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()); 
})​; 

Answer 3

que tenía el mismo problema cuando se trata de hacer una calculadora de presupuesto con las opciones, lo solucioné usando aa var para mantener el último valor;

  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"); 
       } 
      }); 

Answer 4

Sólo para completar la respuesta de # Adil, si usted tiene radios con el texto, si el usuario hace clic en el texto, el previousRadio no se actualiza. Se puede utilizar el siguiente:

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

y JS:

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

Answer 5

"Ha sido un tiempo" sería un eufemismo, pero en caso de que alguien tropieza con este problema:

Adil me señaló en la dirección correcta, sin embargo, mouseup solo funciona para eventos activados por el mouse (duh), así que probé con focus y, dado que también ocurre antes del evento change, funciona con wi th, ambas entradas del mouse y del teclado (como cuando se cambia el estado de la radio usando las pestañas y arrow). Así que para tener acceso al elemento previamente seleccionado/comprobado antes de la interacción con el usuario utiliza focus y para obtener el elemento actual que utiliza su buen viejo 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 
    $(input).on('focus', function() { 
     console.log($('[name="radios"]:checked').val()); //outputs 1 
    }); 
    $(input).change(function() { 
     console.log($('[name="radios"]:checked').val()); //outputs 2 
    });