jquery mobile demo - Checkboxradio widget(체크박스, 라디오 위젯)

jquery mobile demo - Checkboxradio widget(체크박스, 라디오 위젯)

* 체크박스

- 기본설정

<form>

<label>

<input type="checkbox" name="checkbox-0">체크박스

</label>

</form>

- 작은폰트(Mini size)

<form>

<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true">체크박스

<label for="checkbox-mini-0">체크하기

</label>

</form>

- 세로나열하기(vertical group)

<form>

<fieldset data-role="controlgroup">

<legend>세로정렬 : </legent>

<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">

<label for="checkbox-v-2a">체크하기1</label>

<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">

<label for="checkbox-v-2b">체크하기2</label>

<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">

<label for="checkbox-v-2c">체크하기3</label>

</fieldset>

</form>

- 가로나열하기(horizontal group)

<form>

<fieldset data-role="controlgroup" data-type="horizontal">

<legend>가로정렬 : </legent>

<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">

<label for="checkbox-h-2a">체크하기1</label>

<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">

<label for="checkbox-h-2b">체크하기2</label>

<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">

<label for="checkbox-h-2c">체크하기3</label>

</fieldset>

</form>

- 체크박스 우측위치(Icon postion)

<form>

<fieldset data-role="controlgroup" data-iconpos="right">

<legend>아이콘우측 : </legent>

<input type="checkbox" name="checkbox-h-6a" id="checkbox-h-6a">

<label for="checkbox-v-2a">체크하기1</label>

<input type="checkbox" name="checkbox-h-6b" id="checkbox-h-6b">

<label for="checkbox-v-2b">체크하기2</label>

<input type="checkbox" name="checkbox-h-6c" id="checkbox-h-6c">

<label for="checkbox-v-2c">체크하기3</label>

</fieldset>

</form>

- 체크박스 사용제한(Disabled)

<form>

<input disabled="" type="checkbox" name="checkbox-t-3a" id="checkbox-t-3a" data-theme="a">

<label for="checkbox-t-3a">체크박스</label>

</form>

- 강조형(Enhanced)

<div class="ui-checkbox">

<label for="checkbox-encanced" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">체크하기</label>

<input type="checkbox" name="checkbox-enhanced" id="checkbox-enhanced" data-enhanced="true">

</div>