<TIL-24> radio button 만들기

Input Tag 를 활용하여 radio Button 을 만들 수 있다.

1개만 체크 가능한 radio 버튼

체크 1 체크 2

벨로그 작성 중일 때는 잘 작동하는데... 출간하고 나면 작동이 안됩니다ㅠㅠ 아래 코드로 확인해 주세요!

• 코드

<input type="radio" name="한개만">
<label>체크 1</label>
 <input type="radio" name="한개만">
<label>체크 2</label>

지금의 radio 버튼은 한개만 선택이 가능하다.
만약 중복체크가 가능한 radio 버튼의 UI를 만들고 싶다면, name 속성을 지워주면 된다.

중복 체크가 가능한 radio 버튼

체크 1 체크 2

• 코드

<input type="radio">
<label>체크 1</label>
 <input type="radio">
<label>체크 2</label>

Point) input tag의 name속성이 들어간다면, 같은 name 속성 끼리는 한개만 선택이 가능하다.