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

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 条评论 负责人:无 分享
已邀请:
五块钱的果汁

五块钱的果汁 - 勤奋是一种被逼无奈 - 热爱是一种情不自禁~

对你的代码醉了下调整


      (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

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