jQuery Mobile 체크박스 — controlgroup, horizontal 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 체크박스 —
controlgroup · data-type 완전 정리

여러 체크박스를 한 그룹으로 묶고 세로/가로 배치

시작 오늘 분석할 코드

같은 주제의 체크박스 3~2개를 fieldset 안에 묶고 data-role="controlgroup"으로 그룹화한다. 두 그룹은 배치 방향만 다르다 — 세로(기본) vs 가로(data-type="horizontal").

<!-- 1. 세로 배치 (기본) --> <fieldset data-role="controlgroup"> <legend>연락매체</legend> <input type="checkbox" id="type1" checked="checked"/> <label for="type1">e-mail</label> <input type="checkbox" id="type2"/> <label for="type2">address</label> … </fieldset> <!-- 2. 가로 배치 (data-type="horizontal") --> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>성별</legend> <input type="checkbox" id="gtype1" checked="checked"/> <label for="gtype1">남성</label> … </fieldset>

실제 출력 미리보기

header 영역

연락매체

e-mail

address

phone

성별

남성

여성

footer 영역

---

용어 핵심 키워드

fieldset관련 입력박스를 의미적으로 묶는 HTML 표준 태그

legendfieldset의 제목 — 그룹 이름

controlgroupjQM 그룹화 — 시각적으로 한 덩어리로 표시

data-type="horizontal"가로 배치 — 토글 버튼 그룹처럼 보임

---

1 왜 fieldset + legend?

fieldset은 HTML 표준이다. 관련된 폼 요소를 한 그룹으로 묶는다는 의미를 브라우저와 스크린리더에 알린다. legend는 그 그룹의 제목이다.

jQM은 fieldset을 보고 예쁜 박스로 그려주고, data-role="controlgroup"이 추가로 있으면 안의 체크박스들을 한 덩어리로 시각화한다.

---

2 input/label 짝짓기 — for-id

각 체크박스에는 반드시 id가 있고, 짝꿍 label의 for 값이 그 id와 일치해야 한다.

• 이렇게 하면 label 텍스트를 클릭해도 체크가 토글된다 (모바일에서 매우 중요)
• 스크린리더가 "어떤 체크박스에 어떤 텍스트가 매칭되는지" 정확히 알린다
• jQM은 이 매칭을 보고 버튼처럼 보이는 큰 클릭 영역을 만든다

⚠ 본 코드의 오타 — 두 번째 fieldset의 name="gtype 2"에 공백이 들어가 있다("gtype 2"). 작동은 하지만 폼 데이터 키에 공백이 섞여 서버 처리 시 문제될 수 있다.

---

3 checked="checked" — 미리 선택

HTML5 표준에선 그냥 checked만 써도 되지만, XHTML 호환을 위해 checked="checked" 형태도 자주 본다. 둘 다 같은 의미다.

본 코드에서는 e-mail · phone · 남성이 처음부터 체크된 상태로 표시된다.

---

 

반응형

 

4 data-type — 세로 vs 가로

속성	모양	적합한 상황
(기본)	세로 — 위아래로 큰 버튼 줄지어 쌓임	옵션이 많거나 텍스트가 긴 경우
data-type="horizontal"	가로 — 토글 버튼 그룹	옵션 2~3개의 짧은 라벨 (성별·예/아니오)

---

5 자주 하는 실수

실수	증상	해결
label for ↔ input id 불일치	label 클릭해도 체크 안 됨	둘이 같은 값인지 확인
name 속성에 공백	서버에서 키 파싱 실패	type_2처럼 _ 사용
controlgroup 없이 체크박스 나열	한 덩어리로 안 보임 — 들쑥날쑥	fieldset에 data-role="controlgroup"
radio처럼 단일 선택 기대	checkbox는 다중 선택만 가능	단일 선택은 type="radio"

---

6 현대식 대안

표준 HTML fieldset/legend/checkbox는 그대로 사용하되, jQM 의존 없이 CSS만으로 같은 모양을 만들 수 있다. 토글 버튼 그룹은 Bootstrap의 .btn-group + .btn-check 조합이 표준이다.

---

핵심 한 줄 요약

fieldset+legend관련 입력 묶음 + 그룹 제목

controlgroupjQM 시각적 한 덩어리화

data-type=horizontal가로 토글 버튼 그룹

label for=id큰 클릭 영역 + 접근성

checked초기 선택 상태

Tags

#jQuery-Mobile #checkbox #fieldset #legend #controlgroup #horizontal #label #checked #폼 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, checkbox, fieldset, legend, controlgroup, data-type, horizontal, label, for, checked, 폼, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리