[Javascript] 체크박스 하나만 선택되도록 하기

 

체크박스를 활용하는 다양한 방법을 알아보고 있습니다.

 

[HTML] input 태그로 체크박스(checkbox) 만들기`

[Javascript] 체크박스(checkbox)에 선택 된 값 출력하기

[Javascript] 체크박스에 체크된 항목 개수 구하기

[Javascript] 체크박스 전체 선택 / 전체 해제 구현하기

[Javascript] 체크박스 중, 하나라도 선택해제 될 경우 전체 선택 해제 하는 2가지 방법

 

체크박스는 보통 다중 선택이 필요할 때 많이 사용됩니다.

만약, 사용자가 여러 개의 항목 중 한 가지만 선택해야 한다면

라디오 버튼을 사용해야 합니다.

[HTML] input 태그로 라디오버튼(radio) 만들기

[Javascript] 라디오 버튼(radio) 값 가져와서 출력하기

[Javascript] 라디오 버튼의 텍스트 클릭하여 항목 선택하기

[Javascript] 라디오 버튼 클릭하여, 텍스트 값 출력하기

 

하지만, 반드시 체크박스로 이 내용을 구현해야 한다면 다음과 같이 할 수 있습니다.

 

체크박스 하나만 선택되도록 구현하기

<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)'/> 토끼

function checkOnlyOne(element) {
  
  const checkboxes = document.getElementsByName("animal");
  
  checkboxes.forEach((cb) => {
    cb.checked = false;
  })
  
  element.checked = true;
}

(HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요.)

 

 < 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로 변경해서,

해당 체크박스가 선택되도록 합니다.

 

---

위와 같은 방법으로

여러 개의 체크박스 중 하나만 선택되도록 구현할 수 있습니다.