checkbox/index.html

<!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">
    <meta name="format-detection" content="telephone=no, address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="友阿微商城">
    <meta name="keyword" content="友阿,微商城,全渠道">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/checkbox.css">
    <script type="text/javascript" src="js/flexible.js"></script>
    <script type="text/javascript" src="js/checkbox.js"></script>
    <title>demo</title>
    <style type="text/css">
        .result {
            width:40%;margin:50px auto
        }
        .hide {
            visibility: hidden;
        }
        .show {
            visibility: visible;
        }
        .all {
            width:40%;
            margin: 10px auto;
        }
    </style>
</head>
<body>
 
<div class="all">
    <button>全选 / 取消</button>
</div>
<div class="result">
	衣服<div class="checkbox">
        <span class="off"></span>
	</div>	
    鞋子<div class="checkbox">
        <span class="off"></span>
    </div>  
    帽子<div class="checkbox">
        <span class="off"></span>
    </div> 
    <hr />
    <p><span class="hide">你选择了：</span><span></span></p>
</div>
<script type="text/javascript">
    var div = document.querySelector('.result'),
        btn = document.querySelector('button'),
        mockData = [
            {name:'衣服',size:'xxl'},
            {name:'鞋子',size:'41'},
            {name:'帽子',size:'x'}
        ];
    mockData.forEach(function(d,i){
        var c = new Checkbox({
            element:div.children[i],
            checked:false,
            onClick:function(checked){
                d.checked=checked;
                submit()
            }
        });
        mockData[i].checkbox = c;
    })
	 
    div.children[3].onclick = submit;
    btn.onclick = function(){
        mockData.forEach(function(d,i){
            var checked = !d.checked;
            checked ? d.checkbox.on():d.checkbox.off();
            d.checked = checked;
        });
        submit();
    }
 
    function submit(){
        var arr = [];
        mockData.forEach(function(data){
            if(data.checked){
                arr.push(data.name);
            }
            if(arr.length>0){
                div.children[4].children[0].className='show'
                div.children[4].children[1].innerHTML= arr.join(';')
            }else{
                div.children[4].children[0].className='hide';
                div.children[4].children[1].innerHTML='点一个呗';
            }
        })
    }
</script>
</body>
</html>