HTML 체크박스 · 라디오 — checkbox · radio · name 그룹 완전 정리

 

 

Web Development · HTML Form

HTML 체크박스 · 라디오 —
다중 선택 vs 단일 선택 완전 정리

name 속성으로 그룹 만들기 · label로 클릭 영역 확장

시작 오늘 분석할 코드

같은 input 태그지만 type만 바뀌면 동작이 완전히 달라진다. checkbox는 여러 개 선택, radio는 하나만 선택. 그리고 radio의 핵심은 name 속성으로 그룹 만들기.

<h3>수강 분야(다수 선택 가능)</h3> <ul> <li><input type="checkbox" value="grm">문법</li> <li><input type="checkbox" value="wr">작문</li> <li><input type="checkbox" value="rd">독해</li> </ul> <h3>수강 과목(1과목만 선택 가능)</h3> <ul> <li><label><input type="radio" name="subject" value="eng">영어회화</label></li> <li><label><input type="radio" name="subject" value="ch">중국어회화</label></li> <li><label><input type="radio" name="subject" value="jp">일어회화</label></li> </ul>

실제 출력 결과

수강 분야 (다수 선택)

• 문법
• 작문
• 독해

수강 과목 (1개만)

• 영어회화
• 중국어회화
• 일어회화

용어 용어 정리

type=checkbox다중 선택 — 네모 박스

type=radio단일 선택 — 동그란 라디오

nameradio 그룹 식별자

value선택 시 서버로 전송될 값

checked처음부터 선택된 상태

label텍스트 클릭 영역 확장

---

1 checkbox vs radio — 가장 큰 차이

checkbox

네모 박스 (☐ ☑)
여러 개 선택 가능
각각 독립
관심사·취미·동의

radio

동그라미 (○ ●)
그룹 내 1개만
name으로 그룹화
성별·등급·결제 방식

※ 이름의 유래: 라디오 버튼은 옛날 라디오의 채널 선택 버튼에서 따왔다. 한 채널 누르면 다른 채널이 자동으로 튀어 올라오는 그것 — "한 번에 하나만".

---

2 radio의 핵심 — name 속성으로 그룹 만들기

radio가 "한 번에 하나만"인 이유는 같은 name을 가진 것끼리 그룹으로 묶이기 때문이다. 다른 name이면 다른 그룹.

<!-- 그룹 1: 수강 과목 (한 개만 선택) --> <input type="radio" name="subject" value="eng"> 영어 <input type="radio" name="subject" value="ch"> 중국어 <input type="radio" name="subject" value="jp"> 일어 <!-- 그룹 2: 결제 방식 (다른 그룹이라 독립) --> <input type="radio" name="pay" value="card"> 카드 <input type="radio" name="pay" value="bank"> 무통장

※ name이 같지 않으면 모두 선택돼버린다. radio 본연의 동작이 안 됨. 그룹마다 동일한 name을 쓰는 게 절대 규칙.

---

3 name vs id — 헷갈리는 둘

속성	역할	중복 가능?
id	HTML 요소 식별 (CSS·JS·label용)	X — 페이지에 유일
name	폼 데이터 키 (서버 전송용)	O — radio 그룹은 동일해야

<input type="radio" name="subject" id="r1" value="eng"> │ │ │ │ │ └─ 서버로 전송될 값 │ └─ HTML 식별자 (label 연결용) └─ 폼 그룹 키 (radio 묶음)

---

4 label로 클릭 영역 확장

이번 코드의 radio는 모두 <label>로 감싸져 있다. 그 결과 "영어회화" 텍스트 부분을 클릭해도 라디오가 선택된다. 모바일에서 매우 중요한 사용성 개선.

label 없음

동그라미 작은 부분만 클릭
모바일에서 누르기 어려움
접근성 ↓

label로 감쌈

텍스트도 함께 클릭 영역
모바일 친화적
접근성 ↑

※ checkbox·radio는 거의 항상 <label>로 감싼다. 이게 표준 패턴.

 

---

반응형

5 checked — 처음부터 선택

checked 속성을 추가하면 페이지 로드 시 처음부터 선택된 상태가 된다. 기본값을 미리 정해주는 방식.

<input type="radio" name="size" value="s"> S <input type="radio" name="size" value="m" checked> M (기본) <input type="radio" name="size" value="l"> L → M이 처음부터 선택된 상태로 페이지 표시

※ checked는 불린 속성이다. checked="false"로 적어도 의미 없음. 끄려면 속성 자체를 빼야 함.

---

6 서버 전송 형식

checkbox와 radio가 서버로 보내는 데이터 형식이 다르다.

// checkbox (다중) — 같은 name이면 배열처럼 ?subject=grm&subject=wr&subject=rd → PHP: $_POST['subject'][] 형태로 받음 // radio (단일) — 단일 값 ?subject=eng → PHP: $_POST['subject'] 단일 값 // 아무것도 안 선택했으면 → 해당 키 자체가 전송 안 됨

※ checkbox name 패턴

• 여러 값 받으려면 name에 []: name="hobby[]"
• 그래야 PHP·일반 서버에서 배열로 받음
• JS의 FormData·fetch는 자동으로 처리

---

7 자주 하는 실수

실수	증상	해결
radio에 name 빠뜨림	모두 선택됨 — 그룹 X	같은 그룹은 동일 name
checkbox에 다른 name	각자 독립 (이건 정상)	의도에 따라 OK·NG 구분
label로 안 감쌈	작은 영역만 클릭됨	label 사용
checked="false" 사용	여전히 선택됨	속성 자체를 제거
radio·checkbox에 value 누락	"on"이 전송됨	value 명시
radio 여러 개에 checked	마지막만 선택	그룹당 1개
checkbox 다중 결과 못 받음	마지막 값만 받음	name="x[]"

---

핵심 한 줄 요약

checkbox다중 선택 — 네모

radio단일 선택 — 동그라미

name 속성radio 그룹 묶기 — 필수

value선택 시 전송될 실제 값

checked기본 선택 (불린 속성)

label로 감싸기텍스트 클릭 영역 확장 (필수)

name="x[]"checkbox 다중 결과 받기

Tags

#checkbox #radio #name #value #checked #label #HTML #체크박스 #라디오 #다중선택 #단일선택 #그룹화 #폼 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

checkbox, radio, name, value, checked, label, HTML, 체크박스, 라디오, 다중선택, 단일선택, 그룹화, 폼, 웹개발, 티스토리