Pobieranie wartości HTML Checkbox ze zdarzeń onclick / onchange

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

Od wewnątrz onClickHandleri / lub onChangeHandlerjak mogę ustalić, jaki jest nowy stan pola wyboru?

Krótka odpowiedź:

Użyj clickzdarzenia, które nie zostanie uruchomione, dopóki wartość nie zostanie zaktualizowana, i zostanie uruchomione, gdy chcesz:

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

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

Przykład na żywo | Źródło

Dłuższa odpowiedź:

Program changeobsługi zdarzeń nie jest wywoływany, dopóki checkedstan nie zostanie zaktualizowany ( przykład na żywo | źródło ), ale ponieważ (jak wskazuje Tim Büthe w komentarzach) IE nie uruchamia changezdarzenia, dopóki pole wyboru nie straci ostrości, nie dostaniesz powiadomienie proaktywnie. Co gorsza, w przypadku IE, jeśli klikniesz etykietę pola wyboru (zamiast samego pola wyboru), aby go zaktualizować, możesz odnieść wrażenie, że otrzymujesz starą wartość (wypróbuj go tutaj, klikając etykietę: przykład na żywo | źródło ). Wynika to z tego, że jeśli pole wyboru jest aktywne, kliknięcie etykiety odbiera fokus, uruchamiając changezdarzenie ze starą wartością, a następnieclickdzieje się, ustawiając nową wartość i ponownie ustawiając fokus na polu wyboru. Bardzo mylące.

Ale możesz uniknąć tych wszystkich nieprzyjemności, jeśli zastosujesz clickzamiast tego.

Użyłem programów obsługi ( onxyzatrybutów) DOM0, ponieważ właśnie o to pytałeś, ale dla przypomnienia ogólnie zalecałbym podłączenie programów obsługi w kodzie (DOM2 addEventListenerlub attachEventstarszych wersjach IE) zamiast używania onxyzatrybutów. Pozwala to na dołączenie wielu programów obsługi do tego samego elementu i pozwala uniknąć tworzenia wszystkich globalnych funkcji programów obsługi.

Wcześniejszej wersji tej odpowiedzi użyto tego kodu do handleClick:

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

Wydawało się, że celem było pozwolenie na zakończenie kliknięcia przed sprawdzeniem wartości. O ile mi wiadomo, nie ma powodu, aby to robić i nie mam pojęcia, dlaczego to zrobiłem. Wartość jest zmieniana przed clickwywołaniem modułu obsługi. W rzeczywistości specyfikacja jest dość jasna . Wersja bez setTimeoutdziała idealnie dobrze w każdej przeglądarce, którą wypróbowałem (nawet IE6). Mogę tylko założyć, że myślałem o innej platformie, na której zmiana nie zostanie dokonana dopiero po wydarzeniu. W każdym razie nie ma powodu, aby to robić za pomocą pól wyboru HTML.

W przypadku React.js możesz to zrobić za pomocą bardziej czytelnego kodu. Mam nadzieję, że to pomoże.

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

Użyj tego

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

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

    //use this value

}
</script>