在移动应用开发中，Mui框架是一个非常实用的前端框架，尤其在开发Hybrid App时，它提供了丰富的组件和API，可以极大地提升开发效率。本文将详细介绍如何在Mui开发环境中获取单选按钮（Radio）和复选框（Checkbox）的值，并提供具体的实例代码。
我们来理解单选按钮和复选框在HTML中的基本使用方式。单选按钮通常用于在一组选项中选择一个，而复选框则允许用户选择多个选项。在HTML中，我们可以使用`<input>`标签的`type="radio"`来创建单选按钮，`type="checkbox"`来创建复选框。它们都可以通过`name`属性来分组，确保在同一组内的单选按钮只能选中一个。
在Mui框架中，为了方便操作，我们可以为这些元素添加自定义的类名（className）。下面我们将通过实例来讲解如何获取选中的单选按钮和复选框的值。
1. **获取单选按钮的值**
获取单选按钮的值，我们通常需要遍历所有具有相同类名的单选按钮，检查哪个被选中，然后返回其对应的值。以下是一个JavaScript函数`getRadioRes`，用于获取选中的单选按钮的值：
```javascript
function getRadioRes(className) {
var rdsObj = document.getElementsByClassName(className);
var checkVal = null;
for (i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked) {
checkVal = rdsObj[i].value;
}
}
return checkVal;
}
```
在这个函数中，我们首先通过`getElementsByClassName`获取所有具有指定类名的单选按钮元素，然后遍历这些元素，检查`checked`属性，如果发现某个单选按钮被选中，就将其值存储在`checkVal`中。最后返回这个值。
2. **获取复选框的值**
对于复选框，由于可能有多个被选中，我们需要创建一个数组来存储所有选中的值。下面的`getCheckBoxRes`函数实现这一功能：
```javascript
function getCheckBoxRes(className) {
var rdsObj = document.getElementsByClassName(className);
var checkVal = new Array();
var k = 0;
for (i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked) {
checkVal[k] = rdsObj[i].value;
k++;
}
}
return checkVal;
}
```
这里，我们创建了一个空数组`checkVal`，然后遍历所有具有指定类名的复选框元素。如果某复选框被选中，就将其值添加到`checkVal`数组中。最后返回这个数组。
在实际使用中，你可以在适当的地方调用这些函数，例如在按钮的点击事件处理函数中，获取单选按钮或复选框的值，然后进行后续的操作，如显示消息、保存数据等。以下是一个简单的例子：
```javascript
function getVals() {
var res = getRadioRes('rds');
if (res == null) {
mui.toast('请选择');
return;
}
mui.toast(res);
res = getCheckBoxRes('rds');
if (res.length < 1) {
mui.toast('请选择');
return;
}
mui.toast(res.join(', '));
}
```
在这个例子中，`getVals`函数首先获取单选按钮的值，如果没有选择，则提示用户；接着获取复选框的值，如果没有选择，也会给出提示。将结果通过`mui.toast`显示出来。
通过在HTML中为单选按钮和复选框设置相同的类名，然后使用上述JavaScript函数，我们可以轻松地在Mui开发中获取这些表单元素的值，这对于构建交互式界面和处理用户输入至关重要。希望这个实例讲解能帮助你更好地理解和应用Mui框架。
