jQuery Mobile - Checkboxes(체크박스)

Checkboxes

checkbox들은 하나 이상의 아이템을 선택할 수 있는 옵션 목록을 제공합니다. 전형적인 checkbox는 터치 환경에 적합하지 않아서 jQuery Mobile에서는 label을 사용해 크고, 클릭하기 좋은 스타일로 만들어줍니다. 사용자 지정 아이콘을 사용하는 것도 가능합니다.
Radio 버튼과 마찬가지로 input과 label 마크업을 사용하고, label 요소로 스타일을 제어하며 input 요소 위에 위치 되어집니다. 그래서, 만약, label의 이미지가 로드시 실패하더라도, input의 기능적인 제어는 가능합니다. 대부분의 브라우저에서는 label를 클릭하면 자동적으로 input이 클릭되게 되지만, 몇몇 모바일 브라우저에서는 수동적으로 해야 했습니다.

Checkbox를 만들기 위해서는 input 태그에 type=”checkbox”속성을 추가하고, 동일한 label 태그의 for 속성이 input 태그의 id와 매칭되도록 합니다.
채크박스가 label요소를 사용하여 문자열을 보여주므로 fieldset요소로 감싸는 것을 추천합니다.
Fieldset 태그에 data-role=”controlgroup”속성을 추가하여 채크박스가 세로방향으로 보여지도록 스타일 할 수 있습니다.

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>

Vertically grouped checkboxes

Multiple checkbox는 하나의 그룹 버튼셋으로 보여지며 프레임웍에서 자동적으로 버튼사이의 마진을 제거 하고 둘레와 모서리를 자연스럽게 만들어 줍니다.

<div  data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>

Horizontal toggle sets

워드 프로세서에서 사용하는 볼트, 이텔릭, 언더라인을 선택하는 버튼그룹 처럼 보여지게 하기 위해 data-type=”horizontal”속성을 추가해 가로방향의 그룹 버튼처럼 만들 수 있습니다.

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6">b</label>

<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
<label for="checkbox-7"><em>i</em></label>

<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
<label for="checkbox-8">u</label>   
</fieldset>
</div>

Refreshing a checkbox
자바스크립트를 통해 비쥬얼스타일을 업데이트 하고 refresh하는 방법은 다음과 같습니다.
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");