jQuery Mobile - Radio buttons(라디오버튼)

라디오 버튼은 옵션 목록중에 하나의 항목을 선택 할 때 사용됩니다. 전형적인 라디오 버튼은 모바일 환경에서 클릭하기 어려움이 있어, jQuery Mobile에서는 크고, 클릭가능하도록 라벨 스타일로 보여지게 됩니다. 사용자 아이콘 셋을 라벨에 추가할 수도 있습니다.
Radio 와 checkbox 컨트롤은 input과 label 마크업을 기본으로 사용합니다. Label 요소를 통해 스타일을 제어할 수 있는데 이는 실제 input 위에 위치 하게 됩니다. 그래서 만약, 라벨의 이미지가 로드하는데 실패했더라도 input의 기능적인 제어는 가능하게 됩니다. 대부분의 브라우저에서 라벨을 클릭하면 input이 자동적으로 클릭됩니다. 그러나 몇몇 모바일 브라우저에서는 수동적으로 해야 했습니다.

Vertically grouped radio buttons
Radio 버튼을 만들기 위해 input 태그에 type=”radio”속성을 추가하고, label 태그를 함께 추가합니다. Label 태그의 for속성은 input 태그의 id와 매치되어야 합니다.
Checkbox 폼요소와 같이 radio 버튼은 label요소를 사용하여 문자열을 보여주기 때문에, fieldset요소로 감싸주는 것을 추천합니다.
마지막으로, fieldset 태그를 div 태그로 감싸고, fieldset 태그에 data-role=”controlgroup” 속성을 추가하여 세로방향으로 스타일 합니다.

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>

<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
<label for="radio-choice-2">Dog</label>

<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
<label for="radio-choice-3">Hamster</label>

<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</div>

Horizontal radio button sets
Radio 버튼은 하나만 선택 가능한 그룹버튼 셋으로 사용할 수 있습니다. Fieldset 태그에 data-type=”horizontal” 속성을 추가하여 가로방향의 라디오 버튼 셋을 만들면 됩니다.
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Layout view:</legend>
<input type="radio" name="radio-view" id="radio-view-a" value="list"  />
<label for="radio-view-a">List</label>

<input type="radio" name="radio-view" id="radio-view-b" value="grid"  />
<label for="radio-view-b">Grid</label>
<input type="radio" name="radio-view" id="radio-view-c" value="gallery"  />
<label for="radio-view-c">Gallery</label>
</fieldset>
</div>

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