보통 체크박스는 여러 가지를 동시에 선택할 수 있는 속성을 이용하기 위해 사용한다. 즉 다음과 같이 여러 가지 체크박스를 동시에 선택할 수가 있다. 아래 예가 전형적인 체크박스의 예다.
선택 1
| 선택 2
| 선택 3
| 선택 4
하지만 간혹 체크박스를 한 가지만 선택하게 했으면 하는 경우가 있다. 물론 이런 경우 <input type="radio">를 사용하여 라디오 버튼을 만드는게 정상이다. 하지만 때에 따라 예외도 있는 법. 이 기능을 체크박스를 이용하여 구현해 보자.
우선 아래 예를 보기 바란다. 아래 체크박스를 동시에 선택해 보기 바란다. 동시에 여러 개를 선택할 수 없고 오직 하나의 체크박스만 선택할 수가 있다.
위 체크박스에 대한 HTML 태그는 다음과 같다.
|
<form name=myForm>
선택 1<input type="checkbox" name="objChkBox" onClick="chkBoxCheck(0)"><br>
선택 2<input type="checkbox" name="objChkBox" onClick="chkBoxCheck(1)"><br>
선택 3<input type="checkbox" name="objChkBox" onClick="chkBoxCheck(2)"><br>
선택 4<input type="checkbox" name="objChkBox" onClick="chkBoxCheck(3)"><br>
선택 5<input type="checkbox" name="objChkBox" onClick="chkBoxCheck(4)"><br>
선택 6<input type="checkbox" name="objChkBox" onClick="chkBoxCheck(5)"><br>
선택 7<input type="checkbox" name="objChkBox" onClick="chkBoxCheck(6)"><br>
선택 8<input type="checkbox" name="objChkBox" onClick="chkBoxCheck(7)"><br>
</form> |
위 <input type ...> 태그의 onClick 이벤트에서 호출한 chkBoxCheck() 함수에 대한 자바스크립트 코드는 다음과 같다.
|
<SCRIPT LANGUAGE="JavaScript">
function chkBoxCheck(intChkNumber) {
// 체크박스 갯수만큼 반복문을 돌면서
for (j = 0; j < 8; j++) {
// 체크박스가 선택되어 있으면
if (eval("document.myForm.objChkBox[" + j + "].checked") == true) {
// 우선 체크박스의 속성을 선택되지 않음으로 하고
document.myForm.objChkBox[j].checked = false;
// 사용자가 클릭한 체크박스와 프로그래밍적으로 돌고 있는
// 체크박스의 번호가 같으면
if (j == intChkNumber) {
// 이런 경우만 체크박스가 선택되도록 한다...
document.myForm.objChkBox[j].checked = true;
}
}
}
}
</script> |
출처 : 네이버 카페 - 왕초보 홈페이지만들기 :
http://cafe.naver.com/theweb/195 입니다.
