Отримання значення HTML-позначки від подій 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замість цього.

Я використовував обробники DOM0 ( onxyzатрибути), тому що про це ви питали, але для запису я б, як правило, рекомендував підключити обробників у коді (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>