[HTML] input:radio 여러개(다중) 선택될 때, 하나만(단일) 선택 방법

radio 타입의  input 태그를 사용하다보면,

가끔(?) 라디오 버튼이 한번에 여러개가 선택되는 문제가 발생할 때가 있다.

(물론 의도할 때도 있지만...)

 

즉, 아래와 같이 라디오 버튼을 만들면,

<input type="radio">10대
<input type="radio">20대
<input type="radio">30대

 

아래와 같이 여러개가 동시에 선택되는 것이다.

 

라디오 버튼은 보통, 특정 변수 하나에 특정 값 하나만 할당하기 위해 많이 사용한다.

이를 위해 name 속성을 활용하는 것으로 알고 있다.

 

즉, 라디오 버튼들의 name 속성을 모두 동일하게 주어야,

라디오 버튼 간에 연관성(?)이 확보되어

단 하나만 선택할 수 있게 된다.

 

아래처럼 name 속성을 동일하게 주면,

<input type="radio" name="age">10대
<input type="radio" name="age">20대
<input type="radio" name="age">30대

 

아래처럼 단 하나만 다중택일 된다.

 

해결 완료!