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

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

внутри onClickHandler и/или onChangeHandler, Как я могу определить, будет ли новое состояние checkbox?

2 ответов


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

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

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

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

видео | источник

более подробный ответ:

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


использовать

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

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

    //use this value

}
</script>