<!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">消息中心</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:52
- 更新：2015-10-16 16:30
- 阅读：8758
MUI checkbox 做全选的时候，如果点击了其中一个，在点击全选，则被点击过的checkbox样式不在变化
分类：MUI
BoredApe - 有问题就会有答案。
对你的代码醉了下调整
(function (m) {
document.getElementById('checkAll').addEventListener('change',function(e) {
var listBox = m('.listCheckBox');
if (e.target.checked) {
listBox.each(function() {
var ele = this;
ele.checked=true
})
} else {
listBox.each(function() {
var ele = this;
ele.checked=false
// ele.removeAttribute('checked');
})
}
})
})(mui)
IT_阳光 (作者)
找点说嘛，害我白丢20分，再说了，好像没看到那里说怎么操作这个checkbox
2015-10-16 16:34
IT_阳光 (作者)
还是非常感谢
2015-10-16 16:37