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
- Type: {string}
- 데이터 바인딩 방식을 정의 합니다.
참고: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로 가지는 오브젝트를 리턴합니다.
- object
//Radio에 설정된 모든옵션값을 가져옵니다.
$('#Radio').getOptions();
.getText()
라디오 버튼의 label 텍스트를 가져올 때 사용하는 함수입니다.
- return
- text {string}
- 선택된 라디오 버튼의 label 텍스트
- text {string}
.getValue()
라디오 버튼의 Value를 가져올 때 사용하는 함수입니다.
- return
- value {string}
- 선택된 라디오 버튼의 Value
- value {string}
<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"
- 설정된 Boolean 값에 의해서 라디오 버튼이 활성화/비활성화됩니다.
- isEnabled {Boolean} Required
<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로 가지는 오브젝트를 입력합니다.
- options {object}
$('#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();
});