단일 선택 단추 (INPUT type =“radio”)에 대한 OnChange 이벤트 핸들러가 하나의 값으로 작동하지 않습니다

이에 대한 일반화 된 솔루션을 찾고 있습니다.

같은 이름을 가진 2 개의 무선 입력을 고려하십시오. 제출 될 때 확인 된 값에 따라 양식과 함께 전송되는 값이 결정됩니다.

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

라디오 버튼을 선택 해제하면 변경 이벤트가 시작되지 않습니다. 따라서 value = "1"인 라디오가 이미 선택되어 있고 사용자가 두 번째를 선택하면 handleChange1 ()이 실행되지 않습니다. 이 선택을 취소 할 수있는 이벤트가 없다는 점에서 문제가 있습니다 (어쨌든).

내가 원하는 것은 확인란 그룹 값의 onchange 이벤트 또는 라디오를 확인할 때뿐만 아니라 선택하지 않은 경우를 감지하는 oncheck 이벤트에 대한 해결 방법입니다.

나는 당신 중 일부가 전에이 문제에 부딪쳤다 고 확신합니다. 몇 가지 해결 방법은 무엇입니까 (또는 이상적으로이를 처리하는 올바른 방법은 무엇입니까)? 변경 이벤트를 포착하고 이전에 확인한 라디오와 새로 확인한 라디오에 액세스하고 싶습니다.

PS
onclick은 라디오를 확인할 때 표시하는 더 나은 (크로스 브라우저) 이벤트처럼 보이지만 여전히 확인되지 않은 문제를 해결하지는 못합니다.

체크 박스 유형에 대한 onchange가 체크 또는 체크 해제 할 때 제출하는 값이 변경되므로 이와 같은 경우에 왜 작동하는지 이해하는 것이 좋습니다. 라디오 버튼이 SELECT 요소의 온 체인지처럼 동작하기를 원하지만 할 수있는 일은 ...

var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}

<form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form>

다음은 JSFiddle 데모입니다. https://jsfiddle.net/crp6em1z/

나는 두 가지 변경을 할 것입니다 :

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

1. onclick대신 핸들러를 사용하십시오 onchange-라디오 입력의 "확인 된 상태"를 value변경하지 않고 변경 이벤트가 발생하지 않습니다.
2. 단일 기능을 사용하고 this매개 변수로 전달 하면 현재 선택된 값을 쉽게 확인할 수 있습니다.

ETA : handleClick()기능 과 함께 라디오의 원래 / 이전 값을 페이지 범위 변수로 추적 할 수 있습니다. 그건:

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

이 예제에서 볼 수 있듯이 http://jsfiddle.net/UTwGS/

HTML :

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

jQuery :

$('input[type="radio"]').on('click change', function(e) {
    console.log(e.type);
});

라디오 버튼 옵션 (적어도 일부 브라우저에서는)을 선택 하면 click및 change이벤트가 모두 발생합니다.

또한 내 예제에서 탭과 키보드를 사용하여 옵션을 선택하면 click이벤트 가 계속 발생 한다는 것을 지적해야합니다 .

따라서 요점은 change이벤트가 시작 되더라도 일부 브라우저이지만 click이벤트는 필요한 범위를 제공해야한다는 것입니다.

Jquery의 변경 이벤트를 사용하는 것은 어떻습니까?

$(function() {
    $('input:radio[name="myRadios"]').change(function() {
        if ($(this).val() == '1') {
            alert("You selected the first option and deselected the second one");
        } else {
            alert("You selected the second option and deselected the first one");
        }
    });
});

jsfiddle : http://jsfiddle.net/f8233x20/

여기에서 볼 수 있듯이 http://www.w3schools.com/jsref/event_onchange.asp 라디오 버튼에는 onchange 속성이 지원되지 않습니다.

당신에 의해 링크 된 첫 번째 SO 질문은 당신에게 대답을 제공합니다 : onclick대신 이벤트를 사용하고 그것이 트리거하는 함수 내부의 라디오 버튼 상태를 확인하십시오.

이전 상태를 저장하는 것 외에 다른 방법은 없다고 생각합니다. 다음은 jQuery를 사용한 솔루션입니다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
    var lastSelected;
    $(function () {
        //if you have any radio selected by default
        lastSelected = $('[name="myRadios"]:checked').val();
    });
    $(document).on('click', '[name="myRadios"]', function () {
        if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
            alert("radio box with value " + $('[name="myRadios"][value="' + lastSelected + '"]').val() + " was deselected");
        }
        lastSelected = $(this).val();
    });
</script>

<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
<input type="radio" name="myRadios" value="4" />
<input type="radio" name="myRadios" value="5" />

그것에 대해 조금 더 생각한 후에 변수를 제거하고 클래스를 추가 / 제거하기로 결정했습니다. 여기 내가 가진 것이 있습니다 : http://jsfiddle.net/BeQh3/2/

예, 현재 선택된 단일 선택 단추에 대한 변경 이벤트가 없습니다. 그러나 문제는 각 라디오 버튼이 별도의 요소로 사용되는 경우입니다. 대신 라디오 그룹은와 같은 단일 요소로 간주해야합니다 select. 따라서 해당 그룹에 대해 변경 이벤트가 트리거됩니다. 그것은 경우 select요소 우리는 각 옵션에 대해 걱정하지 만 선택한 옵션을 않았다. 새 옵션을 선택하면 현재 값이 이전 값이 될 변수에 저장됩니다. 마찬가지로 체크 된 라디오 버튼의 값을 저장하기 위해 별도의 변수를 사용해야합니다.

이전 라디오 버튼을 식별하려면 mousedown이벤트 를 반복해야합니다 .

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

이것을보십시오 : http://jsfiddle.net/diode/tywx6/2/

이전에 확인한 라디오를 변수에 저장하십시오.
http://jsfiddle.net/dsbonev/C5S4B/

HTML

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future 'change' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

JS 예제 코드

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + ' was unchecked';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + ' is checked';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

나는 이것이 오래된 문제라는 것을 알고 있지만이 코드 스 니펫은 나에게 효과적이다. 아마도 미래의 누군가가 유용하다고 생각할 것입니다.

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange('juju','button1',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange('juju','button2',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange('juju','button3',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert('Array Passed');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert('Old button was not defined');
    radioArray[0]=radioButton;
    }
  else
    {
    alert('Old button was set to ' + oldButton);
    radioArray[0]=radioButton;
    }
  alert('New button is set to ' + radioArray[0]);
  }
</script>

이것은 내 머리 꼭대기에 있지만, 각 라디오 버튼에 대해 onClick 이벤트를 수행하고 모든 다른 ID를 제공 한 다음 이벤트에서 for 루프를 만들어 그룹의 각 라디오 버튼을 통과하고 어느 것이 'checked'속성을보고 확인했습니다. 체크 된 ID는 변수로 저장되지만, 새로운 라디오 버튼의 체크 여부에 따라 click 이벤트가 시작되므로 temp 변수를 먼저 사용하여 해당 변수의 값이 변경되었는지 확인할 수 있습니다.

<input type="radio" name="brd" onclick="javascript:brd();" value="IN">   
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">` 
<script type="text/javascript">
  function brd() {alert($('[name="brd"]:checked').val());}
</script>

인라인 스크립트를 피하려면 라디오에서 클릭 이벤트를 수신하면됩니다. 클릭 이벤트를 들으면서 일반 자바 스크립트로이를 달성 할 수 있습니다.

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('myRadios').length; radioCounter++) {
      document.getElementsByName('myRadios')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log('this : ',this.value);
      }
}

다음 JS 스크립트를 추가 할 수 있습니다

<script>
    function myfunction(event) {
        alert('Checked radio with ID = ' + event.target.id);
    }
    document.querySelectorAll("input[name='gun']").forEach((input) => {
        input.addEventListener('change', myfunction);
    });
</script>

이것은 나를 위해 작동

<input ID="TIPO_INST-0" Name="TIPO_INST" Type="Radio" value="UNAM" onchange="convenio_unam();">UNAM

<script type="text/javascript">
            function convenio_unam(){
                if(this.document.getElementById('TIPO_INST-0').checked){
                    $("#convenio_unam").hide();
                }else{
                    $("#convenio_unam").show(); 
                }                               
            }
</script>

이것은 checked = false에 원하는만큼의 버튼을 추가하고 각 라디오 버튼의 onclick 이벤트를이 함수로 만드는 데 사용하는 가장 쉽고 효율적인 기능입니다. 각 라디오 버튼에 고유 번호를 지정하십시오

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;
}

가장 쉽고 강력한 방법

getAttribute를 사용하여 라디오 입력 만 읽기

document.addEventListener('input',(e)=>{

if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})

<input type="text"  value="iam text" /> 
<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2