17

如果我有 3 个单选按钮，是否有办法通过 jQuery 找出在用户单击新按钮之前选择的单选按钮的值？

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

在上面的例子中，如果用户点击radio-3，我需要一个获取的方法1，以便我可以对其进行一些格式化。谢谢。

4

6 回答 6

27

您可以使用mouseup和change事件。在鼠标向上时，您将获得radio在选择其他单选按钮之前选择的按钮的值，并且更改事件将给出新的radio按钮选择。

现场演示

$('input[name=radios]').mouseup(function(){
    alert("Before change "+$('input[name=radios]:checked').val());
}).change(function(){
    alert("After change "+$('input[name=radios]:checked').val());
})​;
于 2012-06-15T14:33:19.380 回答
15

我会将按下的值保存到一个数组中并用它来编辑隐藏的值。

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

​</p>

于 2012-06-15T14:42:46.553 回答
3

“已经有一段时间了”是一种委婉说法，但万一有人偶然发现了这个问题：

Adil为我指出了正确的方向，但mouseup仅适用于鼠标触发的事件（duh），所以我尝试了focus并且，因为它也发生在change事件之前，它适用于鼠标和键盘输入（比如当你改变收音机时使用制表符和箭头键的状态）。因此，要在您使用的用户交互之前访问先前选择/检查的项目focus并获取您使用旧的当前项目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
    });
于 2018-03-05T17:25:54.240 回答
2

我在尝试制作带有选项的预算计算器时遇到了同样的问题，我使用 aa var 来保存最后一个值来解决它；

            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");
                }
            });
于 2014-01-10T16:28:27.397 回答
1

只是为了完成#Adil 的回答，如果您有带有文本的收音机，如果用户单击文本，previousRadio 不会得到更新。您可以使用以下内容：

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

和js：

var $previousRadio;
var $inputs = $('input[name=radioName]');
$inputs.parents("label").mouseup(function () {
    $previousRadio = $inputs.filter(':checked');
});
$inputs.change(function () {
    alert($previousRadio.val());
});
于 2016-03-18T11:36:09.230 回答
0

@Ville 对收音机的回答是正确的，这里是复选框

<div id="radio-group">
    <input type="checkbox" id="radio-1" name="radios" value="1" data-prev="false" />
    <input type="checkbox" id="radio-2" name="radios" value="2" data-prev="false" />
    <input type="checkbox" id="radio-3" name="radios" value="3" data-prev="false" />
</div>

JS：

$('body').on("click", "[name='checkbox']", function () {
    $(this).attr("data-prev", this.checked);
});
于 2022-02-17T09:49:34.437 回答