기록이 힘이다.

[React] checkbox에서 하나만 선택 본문

React

[React] checkbox에서 하나만 선택

dev22 2023. 2. 1. 16:31
728x90

https://velog.io/@ingdol2/React-checkbox%EC%97%90%EC%84%9C-%ED%95%9C-%EA%B0%9C%EB%A7%8C-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0

 

[React] checkbox에서 하나만 선택하기

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

velog.io

/** 남여 체크박스 */
    const checkOnlyOne = (checkThis) => {
        const checkboxes = document.getElementsByName('test')
        for (let i = 0; i < checkboxes.length; i++) {
          if (checkboxes[i] !== checkThis) {
            checkboxes[i].checked = false
          }
          setGender(checkThis.value);
        }
      }
 <input className="genterbutton" type="checkbox" name="test" value="men" onChange={(e) => checkOnlyOne(e.target)} />  남
 <input className="genterbutton" type="checkbox" name="test" value="women" onChange={(e) => checkOnlyOne(e.target)} />