单选框
按照原生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 个评论
要回复文章请先登录或注册