mui checkbox radio 获取值

1.单选框 radio用于单选的情况 DOM结构

radio

默认radio在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

radio

若要禁用radio，只需在radio上增加disabled属性即可；
mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下：

• Item 1
• Item 2
• Item 3

列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML：

var list = document.querySelector(‘.mui-table-view.mui-table-view-radio’);
list.addEventListener(‘selected’,function(e){
console.log(“当前选中的为：”+e.detail.el.innerText);
});
2.复选框

checkbox常用于多选的情况，比如批量删除、添加等；

DOM结构

checkbox示例

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

checkbox左侧显示示例

若要禁用checkbox，只需在checkbox上增加disabled属性即可；
3、js获取单选按钮的值

function getVals(){
var res = getRadioRes(‘rds’);
if(res == null){mui.toast(‘请选择’); return;}
mui.toast(res);
}
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;
}

4、js获取复选框的值

function getVals(){
var res = getCheckBoxRes(‘rds’);
if(res.length < 1){
mui.toast(‘请选择’);
return;
}
mui.toast(res);
}
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;
}