Обробник подій OnChange для перемикача (тип INPUT = "радіо") не працює як одне значення

Я шукаю для цього узагальнене рішення.

Розглянемо 2 радіотехнічні входи з такою ж назвою. Після надсилання те, що перевіряється, визначає значення, яке надсилається за допомогою форми:

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

Подія зміни не спрацьовує, якщо вибрано перемикач. Отже, якщо радіо зі значенням = "1" вже вибрано, а користувач вибирає друге, handleChange1 () не запускається. Це створює проблему (для мене в будь-якому випадку) у тому, що немає жодної події, де я міг би впіймати цей відбір.

Мені б хотілося вирішити події onchange для значення групи прапорець або, як альтернатива, подія перевірки, яка виявляє не лише коли перевіряється радіо, але і коли воно не встановлено.

Я впевнений, що хтось із вас раніше стикався з цією проблемою. Які існують певні шляхи вирішення (або в ідеалі, що це правильний спосіб впоратися)? Я просто хочу спіймати подію зміни, отримати доступ до раніше перевіреного радіо, а також щойно перевіреного радіо.

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 не підтримується для перемикачів.

Перше запитання, пов'язане вами, дає відповідь: 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 для кожного перемикача, дати їм всі різні ідентифікатори, а потім зробити цикл for у випадку, щоб перейти через кожен перемикач у групі та знайти, який саме було перевірено, переглянувши атрибут "перевірений". Ідентифікований код, який перевіряється, буде зберігатися у вигляді змінної, але, можливо, спочатку потрібно використовувати змінну 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>

Якщо ви хочете уникати вбудованого сценарію, ви можете просто прослухати події по клацанню по радіо. Цього можна досягти за допомогою простого Javascript, прослухавши подію натискання на

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>

Це найпростіша та найефективніша функція, яка використовується лише додаванням стільки кнопок, скільки ви хочете, щоб відмітити = 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