javascript check box 다루기

체크박스는 Y/N, true/false 형 데이터를 다루는데 주로 사용합니다.

체크박스의 name 값은 서버로 submit시 전송되는 parameter 이름이며 value 값은 parameter 값입니다.

체크박스의 id는 element들 중에서 유일하게 하나 식별하기 위한 용도입니다.

 

체크여부 확인(한개)

<form name="frm">
<input type="checkbox" name="isAgree" id="checkAgree" value="" />동의
</form>

<script>
var isCheck = document.frm.isAgree.checked;
if(!isCheck){
	alert("체크해주세요");
	return false;
}
</script>

 

체크여부 확인(여러 개)

<input type="checkbox" name="season" value="1" />봄
<input type="checkbox" name="season" value="2" />여름
<input type="checkbox" name="season" value="3" />가을
<input type="checkbox" name="season" value="4" />겨울

<script>
var isSeasonChk = false;
var arrSeason = document.getElementsByName("season");
for(var i=0;i<arrSeason.length;i++){
	if(arrSeason[i].checked == ture){
    	isSeasonChk = true;
        break;
    }
}

if(!isSeasonChk){
    alert("계절을 선택하세요");
    return false;
}
</script>

 

체크박스 전체 체크/체크해제

<input type="checkbox" id="checkAll" name="all" onClick="checkAll()">

<input type="checkbox" name="chkBox" >
<input type="checkbox" name="chkBox" >
<input type="checkbox" name="chkBox" >
<input type="checkbox" name="chkBox" >

function checkAll(){
	if(document.getElementById("checkAll").checked==true){  
	    for(var i=0;i<3;i++) document.getElementsByName("checkBox")[i].checked=true;  
	}else{
	    for(var i=0;i<3;i++) document.getElementsByName("checkBox")[i].checked=false;
	}
}