Обработчик событий OnChange для переключателя (тип ввода= "радио") не работает как одно значение

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

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

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

событие change не срабатывает, когда переключатель снят. Поэтому, если радио со значением="1" уже выбрано и пользователь выбирает второе, handleChange1() не запускается. Это представляет проблему (для меня в любом случае) в том, что нет события, где Я могу поймать этот отбор.

то, что я хотел бы, - это обходной путь для события onchange для значения группы флажков или, альтернативно, событие oncheck, которое обнаруживает не только когда радио проверено, но и когда оно снято.

Я уверен, что некоторые из вас столкнулись с этой проблемой раньше. Какие обходные пути (или в идеале что такое правильный способ справиться с этим)? Я просто хочу поймать событие изменения, получить доступ к ранее проверенному радио, а также к новому проверил радио.

П. С.
onclick кажется лучшим (кросс-браузерным) событием, чтобы указать, когда радио проверено, но оно по-прежнему не решает непроверенную проблему.

Я полагаю, имеет смысл, почему onchange для типа флажка работает в таком случае, поскольку он изменяет значение, которое он отправляет, когда вы проверяете или отменяете его. Я хочу, чтобы переключатели вели себя больше как onchange элемента SELECT, но что вы можете сделать...

125
cross-browser html javascript

13 ответов

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

<script>
    var rad = document.myForm.myRadios;
    var prev = null;
    for(var i = 0; i < rad.length; i++) {
        rad[i].onclick = function() {
            (prev)? console.log(prev.value):null;
            if(this !== prev) {
                prev = this;
            }
            console.log(this.value)
        };
    }
</script>
131

Я бы сделал два изменения:

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

как вы можете видеть из этого примера: 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 событие все еще уволен при использовании tab и клавиатуры для выбора опции.

Итак, моя точка зрения что даже если change событие запускается в некоторых браузерах,click событие должно предоставить необходимое покрытие.

23

Я не думаю, что есть какой-либо другой способ хранения предыдущего состояния. Вот решение с 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/

6

Я понимаю, что это старый вопрос, но этот фрагмент кода работает для меня. Возможно, кому-то в будущем это пригодится:

<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>
5

Как насчет использования события изменения 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/

5

Как вы можете видеть здесь: http://www.w3schools.com/jsref/event_onchange.asp Атрибут onchange не поддерживается для переключателей.

первый вопрос SO, связанный вами, дает вам ответ: используйте onclick событие вместо этого и проверьте состояние переключателя внутри функции, которую он запускает.

4

Да нет события изменения для текущего выбранного переключателя. Но проблема в том, что каждый переключатель берется как отдельный элемент. Вместо этого радиогруппу следует рассматривать как один элемент, например select. Таким образом, событие change запускается для этой группы. Если это select элемент мы никогда не беспокоимся о каждом варианте в нем, но берем только выбранный вариант. Мы храним текущее значение в переменной, которая станет предыдущим значением при выборе новой опции. Точно так же у вас есть использовать отдельную переменную для хранения значения переключателя checked.

если вы хотите определить предыдущий переключатель, вы должны зациклиться на 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/

4

сохранить предыдущее проверенное радио в переменной:
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);
4

Это просто с верхней части моей головы, но вы можете сделать событие onClick для каждого переключателя, дать им все разные идентификаторы, а затем сделать цикл for В случае, чтобы пройти через каждый переключатель в группе и найти, который был проверен, посмотрев на атрибут "checked". Идентификатор проверенного будет сохранен как переменная, но вы можете сначала использовать переменную temp, чтобы убедиться, что значение этой переменной изменилось, так как событие click будет срабатывать независимо от того, является ли новое переключатель был проверен.

2
<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>
2

Если вы хотите избежать встроенного скрипта, вы можете просто прослушать событие click по радио. Это может быть достигнуто с помощью простого Javascript, прослушивая событие click на 

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

Это самая простая и эффективная функция, чтобы использовать просто добавить столько кнопок, сколько вы хотите, чтобы checked = false и сделать onclick событие каждого радио buttoncall этой функции. Назначить уникальный номер для каждого радио кнопка

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

}

0