Lấy giá trị của nút radio đã được chọn trước khi người dùng chọn một nút mới

Question

Nếu tôi có 3 nút radio, có cách nào đó thông qua jQuery để tìm giá trị của nút được chọn trước khi người dùng nhấp vào một nút mới một?

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

Trong ví dụ avove, nếu người dùng nhấp vào radio-3, tôi cần một cách để có được 1, để tôi có thể thực hiện một số formattion với nó. Cảm ơn.

Answer 1

tôi sẽ lưu các giá trị ép để một mảng và sửa giá trị ẩn với điều đó.

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

Bạn có thể sử dụng sự kiện mouseup và change. Khi di chuột lên, bạn sẽ nhận được giá trị của nút radio được chọn trước khi chọn nút radion khác và sự kiện thay đổi sẽ cung cấp lựa chọn mới của nút 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

tôi đã có vấn đề tương tự khi cố gắng để làm một máy tính ngân sách với các tùy chọn, tôi giải quyết nó bằng cách sử aa var để giữ giá trị cuối cùng;

  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

Chỉ cần hoàn thành # Câu trả lời của Adil, nếu bạn có radio với văn bản, nếu người dùng nhấp vào văn bản, previousRadio không được cập nhật. Bạn có thể sử dụng như sau:

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

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

"Đó là một thời gian" sẽ là một uyển ngữ nhưng trong trường hợp ai đó vấp phải vấn đề này:

Adil chỉ cho tôi trong đúng hướng, tuy nhiên mouseup chỉ hoạt động cho các sự kiện kích hoạt chuột (duh), vì vậy tôi đã thử với focus và vì nó cũng xảy ra trước change sự kiện, nó hoạt động th, cả đầu vào chuột và bàn phím (như khi bạn thay đổi trạng thái radio bằng cách sử dụng các phím và mũi tên). Vì vậy, để đạt được quyền truy cập vào các chọn trước/mục kiểm tra trước khi tương tác người dùng bạn sử dụng focus và để có được những mục hiện hành bạn sử dụng tốt của bạn cũ 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 
    });