MUI - 復選框、單選框、使用js獲取選擇值

原文地址：http://www.hcoder.net/tutorials/info_85.html

1、復選框

 

 

 

checkbox常用於多選的情況，比如批量刪除、添加等；

DOM結構

<div class="mui-input-row mui-checkbox">
    <label>checkbox示例</label>
    <input name="checkbox1" value="Item 1" type="checkbox" checked>
</div>

默認checkbox在右側顯示，若希望在左側顯示，只需增加.mui-left類即可，如下：

<div class="mui-input-row mui-checkbox mui-left">
    <label>checkbox左側顯示示例</label>
    <input name="checkbox1" value="Item 1" type="checkbox">
</div>

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

2、單選框
radio用於單選的情況
DOM結構

<div class="mui-input-row mui-radio">
    <label>radio</label>
    <input name="radio1" type="radio">
</div>

默認radio在右側顯示，若希望在左側顯示，只需增加.mui-left類即可，如下

<div class="mui-input-row mui-radio mui-left">
    <label>radio</label>
    <input name="radio1" type="radio">
</div>

若要禁用radio，只需在radio上增加disabled屬性即可；
mui基於列表控件，提供了列表式單選實現；在列表根節點上增加.mui-table-view-radio類即可，若要默認選中某項，只需要在對應li節點上增加.mui-selected類即可，dom結構如下：

<ul class="mui-table-view mui-table-view-radio">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell mui-selected">
        <a class="mui-navigate-right">Item 2</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 3</a>
    </li>
</ul>

列表式單選在切換選中項時會觸發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;
}
</script>

 

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