mui初相识03：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;
}