Получение значения HTML Checkbox из событий onclick / onchange


Ответы:


385

Краткий ответ:

Используйте clickсобытие, которое не сработает до тех пор, пока значение не будет обновлено, и сработает, когда вы захотите:

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>

function handleClick(cb) {
  display("Clicked, new value = " + cb.checked);
}

Живой пример | Источник

Чем дольше ответ:

changeОбработчик события не вызывается , пока checkedсостояние не был обновлен ( живой пример | источник ), а потому , что (как Тим Buthe указывает в комментариях) IE не сгореть changeсобытие , пока флажок не теряет фокус, вы не получите уведомление предварительно. Хуже того, с IE, если вы щелкнете метку для флажка (а не сам флажок), чтобы обновить его, у вас может сложиться впечатление, что вы получаете старое значение (попробуйте это с IE здесь, щелкнув метку: live example | источник ). Это связано с тем, что если флажок имеет фокус, нажатие на метку отводит фокус от него, запускает changeсобытие со старым значением, а затемclickпроисходит установка нового значения и установка фокуса обратно на флажок. Очень запутанно.

Но вы можете избежать всего этого неприятного, если вы используете clickвместо этого.

Я использовал обработчики ( onxyzатрибуты) DOM0, потому что это то, о чем вы спрашивали, но для записи я бы вообще рекомендовал подключать обработчики в коде (DOM2 addEventListenerили attachEventв более старых версиях IE), а не использовать onxyzатрибуты. Это позволяет вам присоединять несколько обработчиков к одному элементу и избегать превращения всех ваших обработчиков в глобальные функции.


Более ранняя версия этого ответа использовала этот код для handleClick:

function handleClick(cb) {
  setTimeout(function() {
    display("Clicked, new value = " + cb.checked);
  }, 0);
}

Казалось, что цель состояла в том, чтобы завершить щелчок, прежде чем смотреть на значение. Насколько я знаю, нет причин делать это, и я понятия не имею, почему я это сделал. Значение изменяется до clickвызова обработчика. На самом деле, спецификация об этом совершенно ясна . Версия без setTimeoutпрекрасно работает в любом браузере, который я пробовал (даже в IE6). Я могу только предположить, что я думал о какой-то другой платформе, где изменение не было сделано до окончания мероприятия. В любом случае, нет причин делать это с помощью флажков HTML.


6
К счастью, onchangeработает правильно в +IE9. Источник
Мори

Добавляя мои 2 цента здесь: Кажется, что IE8 (и, я полагаю, ниже) различает клик вниз и релиз клик ... и что причина, по которой мы на этой странице, заключается в том, что он запускает клик вниз вместо клика релиз. Похоже, флажки активируются только при отпускании щелчка - нажатие вниз, а затем перемещение мыши регистрируют щелчок, но не изменяют флажок.
dah97765

2
Похоже, что переключение флажка с помощью навигации по клавиатуре ( tab+ space) также вызовет onclickобработчик (проверено, по крайней мере, в Chrome 51).
Нейт Уиттакер

Как получить значение этого флажка на клик?
user7350714

12

Для React.js вы можете сделать это с более читаемым кодом. Надеюсь, поможет.

handleCheckboxChange(e) {
  console.log('value of checkbox : ', e.target.checked);
}
render() {
  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}

8

Использовать это

<input type="checkbox" onclick="onClickHandler()" id="box" />

<script>
function onClickHandler(){
    var chk=document.getElementById("box").value;

    //use this value

}
</script>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.