遇到个很尴尬的事情,从网上找的复选框,都有效果,然而在我自己的项目中却没有效果,对复选框的操作十分的不灵敏,网上也没什么可以解释的博客,这种事情也只有我犯这么二的问题,标签放到了不该放的位置,应该放在哪个位置呢?
下面是基于HTML5的MUI框架代码段:
<!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>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">checkbox’ demo</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">多选题:你的爱好是什么?</h5>
<div class="mui-card" style="margin-top: 10px;">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox" style="height: 50%;margin-top: 10px;">
<label>
<p>球类</p>
<p>篮球</p>
</label>
<input name="checkbox1" value="Item 1" type="checkbox">
</div>
<div class="mui-input-row mui-checkbox" style="height: 50%;margin-top: 10px;">
<label>
<p>文艺类</p>
<p>小说</p>
</label>
<input name="checkbox2" value="Item 2" type="checkbox">
</div>
<div class="mui-input-row mui-checkbox" style="height: 50%;margin-top: 10px;">
<label>
<p>生活</p>
<p>睡觉、吃</p>
</label>
<input name="checkbox3" value="Item 3" type="checkbox">
</div>
<div class="mui-input-row mui-checkbox mui-disabled">
<label>disabled checkbox</label>
<input name="checkbox4" type="checkbox" disabled="disabled">
</div>
</form>
</div>
<div align="center" style="margin: 12px 12px;">
<button id="sure" type="button" class="mui-btn mui-btn-blue mui-btn-block" style="font-size: 100%;">确定</button>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8">
mui.init();
var sureButton;
mui.plusReady(function() {
// Janine:获取确认按钮
sureButton = document.getElementById("sure");
// Janine:确定按钮的点击事件
sureButton.addEventListener('tap', function() {
// Janine:获取input标签中的checkbox
var chks = document.getElementsByTagName('input');
var bl = true;
// 定义数组存放相关信息
var checkpass = new Array();
// 获取复选框的长度,一共有几个复选框
var length = chks.length - 1;
for(var i = 0; i <= length; i++) {
// Janine:判断复选框是否被选上
if(chks[i].checked) {
bl = false;
checkpass[i] = {
name: "null",
};
checkpass[i].name =chks[i].previousElementSibling.innerText;
mui.alert(checkpass[i].name);
}
}
if(bl) {
mui.alert('最少选择一条信息');
}
});
});
</script>
</body>
</html>
js代码