jquery - 받기 - 사용자가 새로운 라디오 버튼을 선택하기 전에 선택된 라디오 버튼의 값을 가져옵니다.



label 값 가져오기 (4)

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 을 얻을 수있는 방법이 필요하므로 여기에 몇 가지 형식을 사용할 수 있습니다. 감사.

https://ffff65535.com


"잠시 동안"완곡 어법이지만 누군가가이 문제에 비틀 거린 경우 :

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

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

옵션이있는 예산 계산기를 만들 때 동일한 문제가 발생했습니다. 마지막 값을 유지하기 위해 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");
                }
            });

mouseupchange 이벤트를 사용할 수 있습니다. 마우스를 올리면 다른 radio 버튼을 선택하기 전에 선택되는 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());
})​;




radio-button