• 목록

체크박스는 보통 다중 선택이 필요할 때 많이 사용됩니다.
만약, 사용자가 여러 개의 항목 중 한 가지만 선택해야 한다면
라디오 버튼을 사용해야 합니다.
하지만, 반드시 체크박스로 이 내용을 구현해야 한다면 다음과 같이 할 수 있습니다.[code]<input type='checkbox'
      name='animal'
      value='dog'
      onclick='checkOnlyOne(this)'/> 개
<br />
<input type='checkbox'
      name='animal'
      value='cat'
      onclick='checkOnlyOne(this)'/> 고양이
<br />
<input type='checkbox'
      name='animal'
      value='rabbit'
      onclick='checkOnlyOne(this)'/> 토끼
<script>
function checkOnlyOne(element) {
 
  const checkboxes
      = document.getElementsByName("animal");
 
  checkboxes.forEach((cb) => {
    cb.checked = false;
  })
 
  element.checked = true;
}
</script>[/code]
< HTML >
name이 animal인 3개의 체크박스가 있습니다.
각각의 체크박스들은 onclick 이벤트가 발생했을 때
'checkOnlyOne()' 함수를 호출하고,
파라미터로 this, 즉, 자기 자신 element를 전달합니다.

< JS >
const checkboxes = document.getElementsByName("animal");
document.getElementsByName() 함수는
document에서 'animal'이라는 이름을 가진 모든 element를 찾아서
NodeList 형태로 리턴합니다.
여기에서는 name='animal'인 3개의 체크박스가 리턴되었습니다.

checkboxes.forEach((cb) => {
  cb.checked = false;
})

앞에서 선택 된 모든 체크박스의 checked 값을 false로 지정하여,
체크박스 선택을 해제합니다.

element.checked = true;

마지막으로,
파라미터로 전달 된 체크박스, 즉, 클릭된 체크박스의 checked 값을 true로 변경해서,
해당 체크박스가 선택되도록 합니다.

위와 같은 방법으로
여러 개의 체크박스 중 하나만 선택되도록 구현할 수 있습니다.