[Javascript] 체크박스 하나만 선택되도록 만드는 방법

HTML에서 체크박스를 1개만 선택할 수 있도록 만드는 방법 중 하나는 체크박스 그룹에 속한 모든 체크박스 요소에 대해 onchange 이벤트를 사용하여 선택된 체크박스 요소가 1개인지 확인하는 것입니다.

만약 선택된 체크박스 요소가 1개 이상이면, 이전에 선택된 체크박스 요소의 선택은 취소되도록 만듭니다.

 

다음은 이 방법을 사용한 HTML 코드 예시입니다.

See the Pen javascript - select only 1 checkbox by saladent (@saladent) on CodePen.

 

위의 코드에서는 onchange 이벤트를 사용하여 checkboxGroup() 함수를 호출하도록 설정합니다. 

 

이 함수는 체크박스 그룹에 속한 모든 체크박스 요소를 찾아와 선택된 체크박스 요소가 1개인지 확인합니다.

선택된 체크박스 요소가 1개 이상이면 이전에 선택된 체크박스 요소의 선택은 취소합니다. 만약 모든 체크박스 요소가 선택되어 있지 않으면 현재 체크박스 요소를 선택합니다.