Обработчик события OnChange для радиокнопки (INPUT type = «radio») не работает как одно значение

Я ищу обобщенное решение для этого.

Рассмотрим 2 входа типа радио с одинаковым именем. При отправке проверяется значение, которое отправляется с формой:

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

Событие изменения не срабатывает, если переключатель не выбран. Поэтому, если радио со значением = "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 для каждой радиокнопки, присвоить им разные идентификаторы, а затем создать цикл для события, чтобы просмотреть каждую радиокнопку в группе и найти был проверен, посмотрев на атрибут «флажок». Идентификатор отмеченного будет сохранен как переменная, но вы можете сначала использовать временную переменную, чтобы убедиться, что значение этой переменной изменилось, так как событие click будет запускаться независимо от того, была установлена ​​новая радиокнопка или нет.

<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