onclick / onchange 이벤트에서 HTML 확인란의 가치 얻기

<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상태가 업데이트되었습니다 ( 라이브 예 | 소스 ),하지만 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>