mui checkbox radio 获取值

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

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

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

列表式单选在切换选中项时会触发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在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:

若要禁用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;
}

阅读更多
换一批

没有更多推荐了,返回首页