f***@126.com
f***@126.com
  • 发布:2022-01-04 10:07
  • 更新:2022-01-04 10:07
  • 阅读:1440

mui初相识03:mui基础控件 单选框&多选框

分类:MUI

单选框

按照原生JS方法,通过document.getElementsByName获取。

html

<h5 class="mui-content-padded">性别</h5>  
<div class="mui-card">  
    <form class="mui-input-group">  
        <div class="mui-input-row mui-radio mui-left">  
            <label>男</label>  
            <input name="radio" type="radio" value="1" checked>  
        </div>  
        <div class="mui-input-row mui-radio mui-left">  
            <label>女</label>  
            <input name="radio" type="radio" value="2">  
        </div>  
        <div class="mui-input-row mui-radio mui-left mui-disabled">  
            <label>人妖</label>  
            <input name="radio" type="radio" value="0" disabled="disabled">  
        </div>  
    </form>  
</div>

JS

// ①单选框的事件实现  
function getVal1() {  
    var rdsObj = document.getElementsByName("radio");  
    //alert(rdsObj.length);  

    var checkVal = null;  
    for (var i = 0; i < rdsObj.length; i++) {  
        if (rdsObj[i].checked) {  
            checkVal = rdsObj[i].value;  
        }  
    }  
    mui.toast(checkVal);  
}

多选框

html

<h5 class="mui-content-padded">爱好</h5>  
<div class="mui-card">  
    <form class="mui-input-group">  
        <div class="mui-input-row mui-checkbox">  
            <label>吃饭</label>  
            <input name="checkbox" type="checkbox" value="1">  
        </div>  
        <div class="mui-input-row mui-checkbox">  
            <label>睡觉</label>  
            <input name="checkbox" type="checkbox" value="2">  
        </div>  
        <div class="mui-input-row mui-checkbox mui-disabled">  
            <label>打豆豆</label>  
            <input name="checkbox" type="checkbox" value="3" disabled="disabled">  
        </div>  
    </form>  
</div>

JS

// ③创建单选框的选择事件,调用实现  
function getVal3() {  
    var res = getCheckboxRes('checkbox');  
    if (res.length < 1) {  
        mui.toast('请选择爱好!');  
        return;  
    }  
    mui.toast(res);  
}  

function getCheckboxRes(name) {  
    var rdsObj = document.getElementsByName(name);  
    //alert(rdsObj.length);  

    var checkVal = new Array();  
    var k = 0;  
    for (var i = 0; i < rdsObj.length; i++) {  
        if (rdsObj[i].checked) {  
            checkVal[k] = rdsObj[i].value;  
            k++;  
        }  
    }  
    return checkVal;  
}
0 关注 分享

要回复文章请先登录注册