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

Question

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

Из onClickHandler и / или onChangeHandler, как я могу определить новое состояние флажка?

Answer 1

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

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

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

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

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

Более длинный ответ:

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

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

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

---

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

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

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

Answer 2

Используйте это

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

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

    //use this value

}
</script>

Answer 3

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

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