<!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"/>
</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">测试 checkbox</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left">
<label>1</label>
<input name="checkbox" class="listCheckBox" value="Item 2" type="checkbox">
</div><div class="mui-input-row mui-checkbox mui-left">
<label>2</label>
<input name="checkbox" class="listCheckBox" value="Item 2" type="checkbox">
</div><div class="mui-input-row mui-checkbox mui-left">
<label>3</label>
<input name="checkbox" class="listCheckBox" value="Item 2" type="checkbox">
</div><div class="mui-input-row mui-checkbox mui-left">
<label>4</label>
<input name="checkbox" class="listCheckBox" value="Item 2" type="checkbox">
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>5</label>
<input name="checkbox" class="listCheckBox" value="Item 2" type="checkbox">
</div>
</form>
<p>随便点击上面一个，再点击全选，发现被点击过的样式不在改变</p>
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left">
<label>全选</label>
<input type="checkbox" id="checkAll">
</div>
</form>
<script type="text/javascript" charset="utf-8">
mui.init();
(function (m) {
document.getElementById('checkAll').addEventListener('change',function() {
var listBox = m('.listCheckBox');
if (this.checked) {
listBox.each(function() {
var ele = this;
ele.setAttribute('checked','checked');
})
} else {
listBox.each(function() {
var ele = this;
ele.removeAttribute('checked');
})
}
})
})(mui)
</script>
</div>
</body>
</html>
IT_阳光
- 发布：2015-10-16 15:33
- 更新：2016-04-09 17:03
- 阅读：1562
MUI checkbox 做全选的时候，如果点击了其中一个，在点击全选，则被点击过的checkbox样式不在变化
分类：MUI
1 个回复
故乡的云
var listBox = m('.listCheckBox');
if (this.checked) {
listBox.each(function() {
var ele = this;
ele.setAttribute('checked','checked');
})
} else {
listBox.each(function() {
var ele = this;
ele.removeAttribute('checked');
})
}
}
改为
var listBox = m('.listCheckBox');
if (this.checked) {
listBox.each(function() {
var ele = this;
ele.checked=true;
//ele.setAttribute('checked','checked');
})
} else {
listBox.each(function() {
var ele = this;
ele.checked=false;
//ele.removeAttribute('checked');
})
}
}
测试正常.