참조 - 삶의 조각들
체크박스와 라디오버튼은 사용자의 선택을 입력받는 양식이다. jQuery Mobile은 두 양식 모두 <fieldset data-role="controlgroup">태그로 감싸서 그룹화 시킨다.
<fieldset data-role="controlgroup" data-type="horizontal | vertical">
<legend>그룹제목 :</legend>
//체크박스 또는 라디오버튼 목록
</fieldset>
체크박스
체크박스(checkbox)는 다중 선택이 가능하다.
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>스마트폰 :</legend>
<input id="phone1" type="checkbox" name="phone1" />
<label for="phone1">갤럭시폰</label>
<input id="phone2" type="checkbox" name="phone1" />
<label for="phone2">아이폰</label>
<input id="phone3" type="checkbox" name="phone1" />
<label for="phone3">넥서스폰</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>스마트폰 :</legend>
<input id="phone1" type="checkbox" name="phone2" />
<label for="phone1">갤럭시폰</label>
<input id="phone2" type="checkbox" name="phone2" />
<label for="phone2">아이폰</label>
<input id="phone3" type="checkbox" name="phone2" />
<label for="phone3">넥서스폰</label>
</fieldset>
</div>
라디오버튼
라디오버튼(radio button)은 단일 선택이 가능하다.
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>스마트폰 :</legend>
<input id="phone1" type="checkbox" name="phone1" />
<label for="phone1">갤럭시폰</label>
<input id="phone2" type="checkbox" name="phone1" />
<label for="phone2">아이폰</label>
<input id="phone3" type="checkbox" name="phone1" />
<label for="phone3">넥서스폰</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>스마트폰 :</legend>
<input id="phone1" type="checkbox" name="phone2" />
<label for="phone1">갤럭시폰</label>
<input id="phone2" type="checkbox" name="phone2" />
<label for="phone2">아이폰</label>
<input id="phone3" type="checkbox" name="phone2" />
<label for="phone3">넥서스폰</label>
</fieldset>
</div>
<input type="checkbox | radio"> 에 사용할 수 있는 data-* 속성
data-* 속성 | 설명 | 값 |
data-theme | 체크박스 테마 | swatch letter (a-z) |