Html과 스크립트를 사용하면서 체크박스를 컨트롤해야 하는 상황이 생길 수 있습니다.
이 체크 박스 값에 따라서 로직을 구성하려면 Javascript나 jQuery를 이용하면 되는데요.
이 방법을 배워보도록 하겠습니다.
document.getElementById(“chkbox”).value 를 alert로 출력해 보면 on이라는 문구가 출력됩니다.
그러나 체크박스를 체크 하던 안하던 on으로 출력되기 때문에 이를 다른식으로 표현해야 합니다.
그래서 체크가 되어 있냐 안되어 있냐라는 기능을 이용하면 됩니다.
Html
<input type="checkbox" id="chkbox">체크박스 테스트
<input type="button" onclick="getCheckvalue()" value="버튼">
Javascript
function getCheckvalue(){
if(document.getElementById("chkbox").checked == true){
alert("Javascript : Y");
}else{
alert("Javascript : N");
}
}
jQuery
function getCheckvalue(){
if($("input:checkbox[ID='chkbox']").is(":checked") == true){
alert("jQuery : Y");
}else{
alert("jQuery : N");
}
}
위와 같이 Javascript는 checked를 jQuery는 is(“:checked”) 구문을 통해서
체크박스 체크유무를 파악하고 변수를 통해 값을 할당하여 사용하면 됩니다.
위에 구문중에 jQuery 사용시 동작이 안되는 경우가 있는데요.
이럴 때 호환성보기 설정이 되어 있는지 체크도 필요합니다.
답글 남기기