본문바로가기

Component

Radio

Basic

기본 라디오버튼

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

<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" 속성을 추가해 줍니다.

<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

data-disabled

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

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

disabled

Functions

.getOptions()

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

  • Return {object}
    • object
      • Radio에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
//Radio에 설정된 모든옵션값을 가져옵니다.
$('#Radio').getOptions();

.getText()

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

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

.getValue()

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

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

<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"

<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)

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

  • Parameters
    • options {object}
      • Radio에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
$('#Radio').setOptions({
	disabled: true
});

.setSelected()

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

<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();
});