[JavaScript] 한 가지만 선택할 수 있는 체크박스 만들기

보통 체크박스는 여러 가지를 동시에 선택할 수 있는 속성을 이용하기 위해 사용한다. 즉 다음과 같이 여러 가지 체크박스를 동시에 선택할 수가 있다. 아래 예가 전형적인 체크박스의 예다.

선택 1 | 선택 2 | 선택 3 | 선택 4

하지만 간혹 체크박스를 한 가지만 선택하게 했으면 하는 경우가 있다. 물론 이런 경우 <input type="radio">를 사용하여 라디오 버튼을 만드는게 정상이다. 하지만 때에 따라 예외도 있는 법. 이 기능을 체크박스를 이용하여 구현해 보자.

우선 아래 예를 보기 바란다. 아래 체크박스를 동시에 선택해 보기 바란다. 동시에 여러 개를 선택할 수 없고 오직 하나의 체크박스만 선택할 수가 있다.

선택 1
선택 2
선택 3
선택 4
선택 5
선택 6
선택 7
선택 8

위 체크박스에 대한 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 입니다.