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

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

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

2 157
javascript html events dom checkbox

2 ответа:

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

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

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

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

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

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

The 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.

300

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

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

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

    //use this value

}
</script>
2