onclick/onchange 행사에서 HTML체크 상자의 값을 추가하십시오.

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);
}

Live예 | 소스

더 오래 답은:

그change이벤트 핸들러가 호출되는 것은checked주( 살아 있는 예 | 소스),지만(Tim이 Büthe 이 발언으로 지적되어)IE는 해고하지 않아 업데이트되었다.change이벤트까지 체크 박스에 포커스를 잃으면 적극적으로 알림 받지 않아요.설상가상으로, IE만약 당신이 체크 박스(체크 박스에 자체라기보다)에 그것을 갱신할 레이블을 클릭합니다, 느낌을 오래 된 값(IE와 여기에 라벨: 살아 있는 예 | 소스를 클릭하여 시도하고)을 받고 있는 거야 얻을 수 있다.만약 체크 박스에 초점을 두고 있기 때문에, 라벨을 클릭하여, 사격의 초점이 그것으로부터 도망 치는 것을 선택하는.change오래된 값을 가진 이벤트, 다음으로click새로운 값을 설정하고 체크박스에 포커스를 다시 설정합니다.너무 헷갈려요.

하지만 이 모든 불쾌감을 피할 수 있는 방법은click대신.

DOM0 핸들러를 사용한 적이 있습니다(onxyzAttribute)는, 그것이 당신이 요구한 것이기 때문입니다만, 레코드에 대해서는, 일반적으로, 코드(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>

use onclick event on all checkboxes that you want to get their values whether they are checked or not.

<input type="checkbox" value="rightSideCheckbox" onclick='handleClick(this);'>

function handleClick(checkbox) {
    if(checkbox.checked){
        console.log(checkbox.value+"True")
    }
    else{
        console.log(checkbox.value+"False")
    }
}

언급URL : https://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events