单选框 - radio
# 选择框控件: radio
## text
radio控件的文本，显示在单选框后面。实际上radio控件也继承于text和button控件，它们的属性也可以用在radio上，比如textSize, textStyle。
## checked
设置radio单选框的选中状态，当checked="true"为选中选项框，否则为未选中选项框。
## enabled
设置单选框是否是启用的，若enabled="false"则为禁用状态，显示未灰色，无法交互。
## isChecked()
返回 {boolean}
返回选项框是否被选中，是则返回true，否则返回false。例如`$ui.radio1.isChecked()。`
## 事件: check
checked {boolean} 是否被勾选
view {View} 当前事件的View
当用户勾选/取消勾选选项框时会触发该事件。
```
"ui";
ui.layout(
<vertical padding="16">
<radio id="radio1" text="单选框1"/>
<radio id="radio2" text="单选框2"/>
<radio id="radio3" text="已勾选的单选框3" checked="true"/>
</vertical>
);
// 监听单个radio的选中
$ui.radio2.on("check", (checked) => {
if (checked) {
toastLog("单选框2被勾选了");
} else {
toastLog("单选框2被取消勾选了");
}
});
```
# 选择框布局: radiogroup
---
radiogroup单选框组合提供了几个单选框radio选项，但用户至多只能选择其中一个选项，即实现选项选中互斥功能。
```
<radiogroup mariginTop="16" gravity="left">
<radio id="open" text="开" checked={stor.get("open")} />
<radio id="end" text="关" checked={stor.get("end")} />
</radiogroup>
```
## checkedButton
设置radiogroup单选框组合中初始勾选的单选框id。例如checkedButton="@+id/radio5"，则使id为radio5的单选框选项为初始勾选状态。
```
"ui";
$ui.layout(
<vertical padding="16">
<radiogroup checkedButton="@+id/radio5">
<radio id="radio4" text="单选框4"/>
<radio id="radio5" text="初始勾选的单选框5"/>
<radio id="radio6" text="单选框6"/>
</radiogroup>
</vertical>
);
```
## setOnCheckedChangeListener(listener)
listener {Function} 勾选监听的回调函数，其参数为
group {RadioGroup} 发生勾选变化事件的radiogroup对象
checkedId {number} 被勾选的radio的id，是一个整数；若当前没有任何单选框被勾选，则为-1
设置某个radiogroup单选框组合中的单选框被选中时的监听。需要注意的是这里的checkedId是一个整数，并不是类似于radio5这样的id字符串，我们可以通过findViewById()函数来获取具体被勾选的单选框，比如：
```
"ui";
$ui.layout(
<vertical padding="16">
<radiogroup id="radiogroup1">
<radio id="radio1" text="单选框1"/>
<radio id="radio2" text="单选框2"/>
<radio id="radio3" text="单选框3"/>
</radiogroup>
</vertical>
);
$ui.radiogroup1.setOnCheckedChangeListener((group, checkedId) => {
// 根据整数id获取勾选的radio控件
let checkedRadio = $ui.radiogroup1.findViewById(checkedId);
switch (checkedRadio) {
case $ui.radio1:
toastLog("单选框1被勾选");
break;
case $ui.radio2:
toastLog("单选框2被勾选");
break;
case $ui.radio3:
toastLog("单选框3被勾选");
break;
default:
toastLog("没有任何单选框被勾选");
break;
}
});
```
## getCheckedRadioButtonId()
返回 {number}
获取单选框组合中的已勾选的单选框选项的整数ID，若当前没有任何单选框被勾选，则为-1。
需要注意的是这里的==checkedId==是一个整数，并不是类似于==radio5==这样的id字符串，我们可以通过==findViewById()== 函数来获取具体被勾选的单选框。
进一步，我们可以通过==indexOfChild==获取被勾选的单选框在radiogroup中的位置。
例如：
```
"ui";
$ui.layout(
<vertical padding="16">
<radiogroup id="radiogroup2">
<radio id="radio4" text="单选框4"/>
<radio id="radio5" text="单选框5"/>
<radio id="radio6" text="单选框6"/>
</radiogroup>
<button id="get" text="获取当前勾选项"/>
</vertical>
);
$ui.get.on('click', () => {
// 获取radiogroup2勾选的单选框ID
let checkedId = $ui.radiogroup2.getCheckedRadioButtonId();
if (checkedId === -1) {
toastLog("没有任何单选框被勾选");
} else {
// 根据id获取勾选的radio
let checkedRadio = $ui.radiogroup2.findViewById(checkedId);
// 获取勾选的位置
let i = $ui.radiogroup2.indexOfChild(checkedRadio);
toastLog("当前勾选的单选框的文本: " + checkedRadio.getText().toString() + ", 位置: " + i);
}
});
```
## clearCheck()
清空单选框组合的各单选框选项的勾选状态。也即让单选框组合重置为未勾选状态。
```
"ui";
$ui.layout(
<vertical padding="16">
<checkbox id="cb1" text="复选框"/>
<radiogroup id="radiogroup1">
<radio id="radio1" text="单选框1"/>
<radio id="radio2" text="单选框2"/>
<radio id="radio3" text="单选框3"/>
</radiogroup>
<button id="clear" text="清空选择"/>
</vertical>
);
$ui.clear.on('click', () => {
// 清空单选框选择
$ui.radiogroup1.clearCheck();
// 设置复选框为不勾选
$ui.cb1.attr("checked", "false");
});
```
---
例子
---
```
"ui";
ui.layout(
<vertical padding="16">
<checkbox id="cb1" text="复选框"/>
<checkbox id="cb2" checked="true" text="勾选的复选框"/>
<radiogroup>
<radio text="单选框1"/>
<radio text="单选框2"/>
<radio text="单选框3"/>
</radiogroup>
<radiogroup mariginTop="16">
<radio text="单选框1"/>
<radio text="单选框2"/>
<radio text="勾选的单选框3" checked="true"/>
</radiogroup>
</vertical>
);
ui.cb1.on("check", (checked)=>{
if(checked){
toast("第一个框被勾选了");
}else{
toast("第一个框被取消勾选了");
}
});
```