mui中的单选框、复选框以及具体操作

1、复选框

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

DOM结构

  

  checkbox示例    

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

    

    checkbox左侧显示示例    

    

若要禁用checkbox，只需在checkbox上增加disabled属性即可；

2、单选框

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);});

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;}