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

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

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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>

Ответ 2

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

<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" />

Ответ 3

Как вы можете видеть из этого примера: 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 должно предоставить необходимый вам охват.

Ответ 4

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

Ответ 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/

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

Да, для выбранного переключателя отсутствует событие изменения. Но проблема в том, что каждый переключатель используется как отдельный элемент. Вместо этого радиогруппу следует рассматривать как один элемент типа 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/

Ответ 10

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

Ответ 11

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

Ответ 12

Если вы хотите избежать встроенного script, вы можете просто прослушать событие клика по радио. Это может быть достигнуто с помощью простого 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);
      }
}

Ответ 13

это работает для меня

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

Ответ 14

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

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