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

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

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

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

Используйте 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.

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

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

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

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

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

    //use this value

}
</script>