4 mui – 复选框、单选框、使用js获取选择值

匈肝侵贪珊黔脓缝糯吐渡系秸

参考文档

1、复选框

4 mui - 复选框、单选框、使用js获取选择值第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;
}

实际操作

1.复选框

<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">操作表</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--复选框-->
		<div class="mui-input-row mui-checkbox">
		    <label>运动</label>
		    <input name="checkbox1" value="运动" type="checkbox">
		</div>
		<div class="mui-input-row mui-checkbox">
		    <label>看书</label>
		    <input name="checkbox1" value="看书" type="checkbox">
		</div>
	</div>
</body>

执行：

4 mui - 复选框、单选框、使用js获取选择值第2张

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

<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">操作表</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--复选框-->
		<div class="mui-input-row mui-checkbox mui-left">
		    <label>运动</label>
		    <input name="checkbox1" value="运动" type="checkbox">
		</div>
		<div class="mui-input-row mui-checkbox mui-left">
		    <label>看书</label>
		    <input name="checkbox1" value="看书" type="checkbox">
		</div>
	</div>
</body>

执行：

4 mui - 复选框、单选框、使用js获取选择值第3张

2.单选框

<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">操作表</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--单选框的name要一致，这样表明他们在同一个组里面，复选框的名字可以不一样-->
		<div class="mui-input-row mui-radio mui-left">
		    <label>运动</label>
		    <input name="checkbox1" value="运动" type="radio">
		</div>
		<div class="mui-input-row mui-radio mui-left">
		    <label>看书</label>
		    <input name="checkbox1" value="看书" type="radio">
		</div>
	</div>
</body>

执行：

4 mui - 复选框、单选框、使用js获取选择值第4张

可以给单选框或者复选框加一个属性checked=”checked”即可选中

3.获取单选框的值

<!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">操作表</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--单选框的name要一致，这样表明他们在同一个组里面，复选框的名字可以不一样-->
		<div class="mui-input-row mui-radio mui-left">
		    <label>运动</label>
		    <input name="checkbox1" value="运动" type="radio" class="ras">
		</div>
		<div class="mui-input-row mui-radio mui-left">
		    <label>看书</label>
		    <input name="checkbox1" value="看书" type="radio" class="ras">
		</div>
		<button onclick="getRadioValue()">获取值</button>
	</div>
	<script type="text/javascript">
		//获取单选框的值
		function getRadioValue()
		{
			var rasObj=document.getElementsByClassName('ras');
			alert(rasObj.length);
		}
	</script>
</body>
</html>

执行，点击按钮

4 mui - 复选框、单选框、使用js获取选择值第5张

完善：

<!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">操作表</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--单选框的name要一致，这样表明他们在同一个组里面，复选框的名字可以不一样-->
		<div class="mui-input-row mui-radio mui-left">
		    <label>运动</label>
		    <input name="checkbox1" value="运动" type="radio" class="ras">
		</div>
		<div class="mui-input-row mui-radio mui-left">
		    <label>看书</label>
		    <input name="checkbox1" value="看书" type="radio" class="ras">
		</div>
		<button onclick="getRadioValue()">获取值</button>
	</div>
	<script type="text/javascript">
		//获取单选框的值
		function getRadioValue()
		{
			var rasObj=document.getElementsByClassName('ras');
			var checkVal=null;
			for(var i=0;i<rasObj.length;i++)
			{
				//如果属性被选中
				if(rasObj[i].checked)
				{
					checkVal=rasObj[i].value;
				}
			}
			mui.toast(checkVal);//这是mui的会自动消失的对话框
		}
	</script>
</body>
</html>

执行：

4 mui - 复选框、单选框、使用js获取选择值第6张

获取单选框的值是比较常用的操作，可以封装成函数

<!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">操作表</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--单选框的name要一致，这样表明他们在同一个组里面，复选框的名字可以不一样-->
		<div class="mui-input-row mui-radio mui-left">
		    <label>运动</label>
		    <input name="checkbox1" value="运动" type="radio" class="ras">
		</div>
		<div class="mui-input-row mui-radio mui-left">
		    <label>看书</label>
		    <input name="checkbox1" value="看书" type="radio" class="ras">
		</div>
		<button onclick="getRadioValue()">获取值</button>
	</div>
	<script type="text/javascript">
		//获取单选框的值
		function getRadioValue()
		{
			var res=getRadioRes('ras')
			mui.toast(res);//这是mui的会自动消失的对话框
		}
		//封装获取单选框值的函数
		function getRadioRes(className)
		{
			var rasObj=document.getElementsByClassName(className);
			var checkVal=null;
			for(var i=0;i<rasObj.length;i++)
			{
				//如果属性被选中
				if(rasObj[i].checked)
				{
					checkVal=rasObj[i].value;
				}
			}
			return checkVal;
		}
	</script>
</body>
</html>

执行：

4 mui - 复选框、单选框、使用js获取选择值第7张

如果没有选就点击，会提示null

完善：

<!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">操作表</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--单选框的name要一致，这样表明他们在同一个组里面，复选框的名字可以不一样-->
		<div class="mui-input-row mui-radio mui-left">
		    <label>运动</label>
		    <input name="checkbox1" value="运动" type="radio" class="ras">
		</div>
		<div class="mui-input-row mui-radio mui-left">
		    <label>看书</label>
		    <input name="checkbox1" value="看书" type="radio" class="ras">
		</div>
		<button onclick="getRadioValue()">获取值</button>
	</div>
	<script type="text/javascript">
		//获取单选框的值
		function getRadioValue()
		{
			var res=getRadioRes('ras')
			if(res==null)
			{
				mui.toast("请选择一项运动");
				return;
			}
			mui.toast(res);//这是mui的会自动消失的对话框
		}
		//封装获取单选框值的函数
		function getRadioRes(className)
		{
			var rasObj=document.getElementsByClassName(className);
			var checkVal=null;
			for(var i=0;i<rasObj.length;i++)
			{
				//如果属性被选中
				if(rasObj[i].checked)
				{
					checkVal=rasObj[i].value;
				}
			}
			return checkVal;
		}
	</script>
</body>
</html>

执行：

4 mui - 复选框、单选框、使用js获取选择值第8张

复选框取的值

<!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">操作表</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--单选框的name要一致，这样表明他们在同一个组里面，复选框的名字可以不一样-->
		<div class="mui-input-row mui-checkbox mui-left">
		    <label>运动</label>
		    <input name="checkbox1" value="运动" type="checkbox" class="ras">
		</div>
		<div class="mui-input-row mui-checkbox mui-left">
		    <label>看书</label>
		    <input name="checkbox1" value="看书" type="checkbox" class="ras">
		</div>
		<button onclick="getCheckboxValue()">获取值</button>
	</div>
	<script type="text/javascript">
		//获取单选框的值
		function getCheckboxValue()
		{
			var res=getCheckboxRes('ras')
			if(res.length<1)
			{
				mui.toast("请选择一项运动");
				return;
			}
			mui.toast(res);//这是mui的会自动消失的对话框
		}
		//封装获取单选框值的函数
		function getCheckboxRes(className)
		{
			var rasObj=document.getElementsByClassName(className);
//			alert(rasObj.length);
			var checkVal=new Array();//使用数组保存值
//			js的数组的键并不能自动增加,所以需要为数组创建键
			var k=0;
			for(var i=0;i<rasObj.length;i++)
			{
				//如果属性被选中
				if(rasObj[i].checked)
				{
					checkVal[k]=rasObj[i].value;
					k++;
				}
			}
			return checkVal;
		}
	</script>
</body>
</html>

执行：

4 mui - 复选框、单选框、使用js获取选择值第9张

蹿肚惶玩变善喀时缮蹦然忻挖