1. checkbox 생성

• checkbox는 원래 다중 선택이 가능함
• 하나만 선택하고 싶을 경우, radio를 사용하면 됨
• 하지만, checkbox를 사용하고 싶을 경우 checkbox에서 하나만 선택되도록 할 수 있음

checkbox 만들기

• name의 값은 통일함

<input type="checkbox" name="test" value="1" /> 1
<br />
<input type="checkbox" name="test" value="2" /> 2
<br />
<input type="checkbox" name="test" value="3" /> 3
<br />

• checkbox 출력
  
• 중복 체크 가능
  

2. onChange 함수 생성

onChange에 적용할 함수 생성

• checkOnlyOne 함수 생성
  • test라는 name을 가진 checkbox를 checkboxes 변수에 저장
  • checkboxes의 크기 만큼 반복문 실행
  • 반복문 돌면서 체크한 값과 일치하지 않으면 checked 속성을 false로 변경

const checkOnlyOne = (checkThis) => {
    const checkboxes = document.getElementsByName('test')
    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i] !== checkThis) {
        checkboxes[i].checked = false
      }
    }
  }

input에 onChange 설정

• input의 onChange에서 e.target 값을 전달함
  • 체크한 값을 checkThis로 전달

<input type="checkbox" name="test" value="1" onChange={(e) => checkOnlyOne(e.target)} /> 1
<br />
<input type="checkbox" name="test" value="2" onChange={(e) => checkOnlyOne(e.target)} /> 2
<br />
<input type="checkbox" name="test" value="3" onChange={(e) => checkOnlyOne(e.target)} /> 3
<br />

• 하나만 체크되는 것을 확인
  • 중복 체크 안됨
• checkThis의 값은
  

3. 전체 코드

export const CheckBoxOne = () => {
  const checkOnlyOne = (checkThis) => {
    const checkboxes = document.getElementsByName('test')
    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i] !== checkThis) {
        checkboxes[i].checked = false
      }
    }
  }
  return (
    <>
      <input type="checkbox" name="test" value="1" onChange={(e) => checkOnlyOne(e.target)} /> 1
      <br />
      <input type="checkbox" name="test" value="2" onChange={(e) => checkOnlyOne(e.target)} /> 2
      <br />
      <input type="checkbox" name="test" value="3" onChange={(e) => checkOnlyOne(e.target)} /> 3
      <br />
    </>
  )
}

해당 내용은 다음 자료를 참고했습니다.
https://itpak.tistory.com/210