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 に答える
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 に答える