MUI - 复选框、单选框、使用js获取选择值

时间：2023-03-09 06:07:37
MUI - 复选框、单选框、使用js获取选择值 
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

</head>

<body>

    <header class="mui-bar mui-bar-nav">

    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">hello</h1>

</header>

<div class="mui-content">

<span class="mui-badge mui-badge-inverted">1</span>

<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>

    <div class="mui-input-row mui-radio mui-left">

        <label>运动</label>

        <input name="checkbox1" value="运动" type="radio" class="rds"/>

    </div>

    <div class="mui-input-row mui-radio mui-left">

      <label>篮球</label>

      <input name="checkbox1" value="篮球" type="radio" class="rds"/>

    </div>

<button type="botton" onclick="getVals();">获取复选框的值</button>

    <div class="mui-input-row mui-checkbox mui-left">

        <label>运动</label>

        <input name="checkbox1" value="运动" type="checkbox" class="rdss"/>

    </div>

    <div class="mui-input-row mui-checkbox mui-left">

      <label>篮球</label>

      <input name="checkbox1" value="篮球" type="checkbox" class="rdss"/>

    </div>

<button type="botton" onclick="getVal();">获取多选框的值</button>

</div>

</body>

<script type="text/javascript">

    /*复选框的请求方法*/

    function getVals(){

        var res = getRadioRes('rds');

        if(res == null){

            mui.toast('请选择');

            return false;

        }

        mui.toast(res);

    }

    /*多选框的触发方法*/

    function getVal(){

        var res = getcheckBoxRes('rdss');

        if(res.length < 1){

            mui.toast('请选择');

            return false;

        }

        mui.toast(res);

    }

    //封装的方法获取复选款的数据

    function getRadioRes(className){

        var rdsobj = document.getElementsByClassName(className);

        //alert(rdsobj.length);

        var checkVal = null;

        for(i=0; i<rdsobj.length;i++){

            if(rdsobj[i].checked){

                checkVal = rdsobj[i].value;

            }

        }

        return checkVal;

    }

    //封装的方法 获取多选框的数据

    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;

    }

</script>

</html>

相关文章