Radio

Basic

기본 라디오버튼

전체 중 하나만 선택 가능한 Radio 컴포넌트입니다.class="Radio"

Radio1 Radio2 Radio3 Radio4

<label>
	<input class="Radio" type="radio" name="radio2" value="value1">Radio1
	</label>
	<label>
		<input class="Radio" type="radio" name="radio2" value="value2">Radio2
	</label>
	<label>
		<input class="Radio" type="radio" name="radio2" value="value3">Radio3
	</label>
	<label>
		<input class="Radio" type="radio" name="radio2" value="value4">Radio4
</label>

이미지 라디오버튼

라디오 버튼에 이미지 파일을 이용하여 스타일을 하고자 하는 경우 아래와 같이 class="ImageRadio" 속성을 추가해 줍니다.

radio1 Radio2 Radio3 Radio4

<label class="ImageRadio">
	<input class="Radio" type="radio" name="radio2" value="value1">radio1
</label>
<label class="ImageRadio">
	<input class="Radio" type="radio" name="radio2" value="value2">Radio2
</label>
<label class="ImageRadio">
	<input class="Radio" type="radio" name="radio2" value="value3">Radio3
</label>
<label class="ImageRadio">
	<input class="Radio" type="radio" name="radio2" value="value4">Radio4
</label>

Attributes

data-bind

Type: {string}
- 데이터 바인딩 방식을 정의 합니다.
  참고:data-bind 사용법

data-disabled

Type: {boolean}
- "true" : 마크업으로 라디오 버튼을 비활성화 시킬 때 다음과 같이 선언하여 사용합니다.

Enabled Radio Disabled Radio Enabled Image Radio Disabled Image Radio

<label>
	<input class="Radio" type="radio" name="radio2" value="value1">Enabled Radio
</label>
<label>
	<input class="Radio" type="radio" name="radio2" value="value1" data-disabled="true">Disabled Radio
</label>
<label class="ImageRadio Margin-left-20">
	<input class="Radio" type="radio" name="radio2" value="value1">Enabled Image Radio
</label>
<label class="ImageRadio">
	<input class="Radio" type="radio" name="radio2" value="value1" data-disabled="true">Disabled Image Radio
</label>

Options 3.0.0+

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

disabled

data-disabled 참고

Functions

.getOptions() 3.0.0+

Radio에 설정된 옵션값을 모두 가져올 수 있습니다.

Return {object}
- object
  - Radio에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.

//Radio에 설정된 모든옵션값을 가져옵니다.
$('#Radio').getOptions();

.getText()

라디오 버튼의 label 텍스트를 가져올 때 사용하는 함수입니다.

return
- text {string}
  - 선택된 라디오 버튼의 label 텍스트

.getValue()

라디오 버튼의 Value를 가져올 때 사용하는 함수입니다.

return
- value {string}
  - 선택된 라디오 버튼의 Value

Radio1 Radio2 Radio3 Radio4

<label>
	<input id="radio1" class="Radio" type="radio" name="radio2" value="value1" checked="checked">Radio1
</label>
<label>
	<input class="Radio" type="radio" name="radio2" value="value2">Radio2
</label>
<label>
	<input class="Radio" type="radio" name="radio2" value="value3">Radio3
</label>
<label>
	<input class="Radio" type="radio" name="radio2" value="value4">Radio4
</label>
<br>
<span id="span1"></span>        
<button id="btn_getValue" class="Button">getValue()</button>
<button id="btn_getText" class="Button">getText()</button>

$("#btn_getValue").on("click", function (){    
	var val = $("#radio1").getValue();
	$("#span1").text(val);
});

$("#btn_getText").on("click", function (){    
	var val = $("#radio1").getText();
	$("#span1").text(val);
});

.setEnabled(isEnabled)

라디오 버튼의 활성화/비활성화를 제어할 때 사용하는 함수입니다

parameter
- isEnabled {Boolean} Required
  - 설정된 Boolean 값에 의해서 라디오 버튼이 활성화/비활성화됩니다. id="radio_enb"

Radio1 Radio2 Radio3 Radio4

<label>
	<input id="radio_enb" class="Radio" type="radio" name="radio_nm" value="value1" checked="checked">Radio1
</label>
<label>
	<input class="Radio" type="radio" name="radio_nm" value="value2">Radio2
</label>
<label>
	<input class="Radio" type="radio" name="radio_nm" value="value3">Radio3
</label>
<label>
	<input class="Radio" type="radio" name="radio_nm" value="value4">Radio4
</label><br>
<button id="btn_setEnabledTrue" class="Button">setEnabled(true)</button>
<button id="btn_setEnabledFalse" class="Button">setEnabled(false)</button>
<button id="btn_setEnabledAllTrue" class="Button">setEnabledAll(true)</button>
<button id="btn_setEnabledAllFalse" class="Button">setEnabledAll(false)</button>

$("#btn_setEnabledTrue").on("click", function (){
	$("#radio_enb").setEnabled(true);
});

$("#btn_setEnabledFalse").on("click", function (){
	$("#radio_enb").setEnabled(false);
});

$("#btn_setEnabledAllTrue").on("click", function (){
	$("[name='radio_nm']").setEnabled(true);
});

$("#btn_setEnabledAllFalse").on("click", function (){
	$("[name='radio_nm']").setEnabled(false);
});

.setOptions(options) 3.0.0+

Radio에 동적으로 옵션을 설정합니다.

Parameters
- options {object}
  - Radio에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.

$('#Radio').setOptions({
	disabled: true
});

.setSelected()

라디오 버튼의 선택/미선택 상태를 제어할 때 사용하는 함수입니다.

Radio1 Radio2 Radio3

<label>
	<input id="radio_1" class="Radio" type="radio" name="radio_ss" value="value1" checked="checked">Radio1
</label>
<label>
	<input id="radio_2" class="Radio" type="radio" name="radio_ss" value="value2">Radio2
</label>
<label>
	<input id="radio_3" class="Radio" type="radio" name="radio_ss" value="value3">Radio3
</label>
<button id="btn_setSelected" class="Button">setSelected()</button>

$("#btn_setSelected").on("click", function (){
	$("#radio_1").setSelected();
});

Component

Radio

기본 라디오버튼

이미지 라디오버튼

data-bind

data-disabled

disabled

.getOptions() 3.0.0+

.getText()

.getValue()

.setEnabled(isEnabled)

.setOptions(options) 3.0.0+

.setSelected()