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

Ответ 1

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

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

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

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

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

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

Обработчик события change не вызывается до тех пор, пока не будет обновлено состояние checked (живой пример | источник), но поскольку (как указывает Тим ​​Бют в комментариях), 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-меток.

Ответ 2

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

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

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

    //use this value

}
</script>

Ответ 3

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

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