IT_阳光
IT_阳光
  • 发布:2015-10-16 15:52
  • 更新:2015-10-16 16:30
  • 阅读:8626

MUI checkbox 做全选的时候,如果点击了其中一个,在点击全选,则被点击过的checkbox样式不在变化

分类: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>  
    <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>
2015-10-16 15:52 1 条评论 负责人:无 分享
已邀请:
BoredApe

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

该问题目前已经被锁定, 无法添加新回复