Home Back

Radio Button

라디오 버튼은 여러개의 항목에서 하나를 선택 할 수 있는 기능을 제공한다.

기본코드

라디오 버튼을 사용 할 경우 <input type="radio">의 name 속성이 동일 해야하며 세로로 정렬 하기 위해서는 <fieldset data-role="controlgroup">으로 Radio 버튼을 감싸 주어야 한다. 또한 기본으로 체크된 효과를 나타내고 싶을 때는 <input type="radio"> Tag에 checked="checked"를 추가 한다.

동의 여부: Yes No

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>동의 여부: </legend>
<input type="radio" name="radio-1" id="radio-1" value="choice-1" checked="checked" />
<label for="radio-1">Yes</label>
<input type="radio" name="radio-1" id="radio-2" value="choice-2" />
<label for="radio-2">No</label>
</fieldset>
</div>

형태 변경

라디오 버튼은 가로 정렬도 가능하며 그룹에서 하나를 선택 할 수 있다. 가로 형으로 그룹화할 때는 기본코드의 <fieldset data-role="controlgroup"> Tag에 data-type="horizontal"을 추가 한다.

동의 여부: Yes No

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>동의 여부: </legend>
<input type="radio" name="radio-2" id="radio-3" value="choice-1" checked="checked" />
<label for="radio-3">Yes</label>
<input type="radio" name="radio-2" id="radio-4" value="choice-2" />
<label for="radio-4">No</label>
</fieldset>
</div>

색상 변경

라디오 버튼에 색상을 지정하기 위해서는 input 내에 data-theme="a~g" 를 통해 적용할 수 있다.

동의 여부: Yes No

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>동의 여부: </legend>
<input type="radio" name="radio-3" id="radio-5" value="choice-1" data-theme="e" />
<label for="radio-5">Yes</label>
<input type="radio" name="radio-3" id="radio-6" value="choice-2" data-theme="g" />
<label for="radio-6">No</label>
</fieldset>
</div>

새로고침

Radio button은 새로고침 기능이 제공된다. 자바 스크립트에 아래 코드를 추가 한 후 이벤트로 연결 해주면 체크된 버튼이 해제된다.

동의 여부 : Yes No

refresh

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

페이지 구조 타입
모바일 Page
Header
Footer
Theme Type

Radio Button

기본코드

형태 변경

색상 변경

새로고침

Copyright(c)2012 Ministry of Government Administration and Home Affairs.