全选框

思路

获取全选框的checked状态，将其状态赋值给各个子框，这样子框状态将与全选框保持一致，实现全选/全不选
但子框被全部选中时全选框状态也要跟着改变，给每个子框绑定点击事件，每点一次都会循环判断全部子框状态

html

<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="cbAll"/>
            </th>
            <th>菜名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>糖醋鱼</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>番茄蛋</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>空心菜</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" value="dd"/>
            </td>
            <td>紫菜汤</td>
        </tr>
        </tbody>
    </table>
</div>

js

 var cbAll = document.getElementById('cbAll');
    var cks = document.querySelector('tbody').getElementsByTagName('input');

    cbAll.onclick = function () {
        for (var i = 0; i < cks.length; i++) {
            cks[i].checked = cbAll.checked;
        }
    }

    for (var i = 0; i < cks.length; i++) {
        cks[i].onclick = function () {
            var flag = true;
            for (var j = 0; j < cks.length; j++) {
                if (!cks[j].checked) {
                    flag = false;
                    break;
                }
            }
            cbAll.checked = flag;
        }
    }

#jQuery实现 ``` $('#cbAll').click(function () { $('tbody input').each(function (i,item) { item.checked = $('#cbAll').prop('checked'); }) })

$('tbody input').click(function () {
    var flag = true;
    $('tbody input').each(function (i,item) {
        if(!item.checked){
            flag = false;
            return false;
        }
    })
    $('#cbAll').prop('checked',flag);
})

**jq1.6版本开始，attr()方法设置的属性如果不存在则返回undefined，所以对于checked、selected和disabled等布尔类型的属性，不要用attr()，应该用prop()**
<br>
#修改checkbox样式
##css

label{
font-size: 18px;
cursor: pointer;
}
input[type='checkbox']{
20px;
height: 20px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 2px;
outline: none;
vertical-align: sub;
margin: 0 9px;

    }
    input[type='checkbox']:checked{
        content:'';
        box-shadow: 0 0 0 2px #fff inset;
        background: #2c323b;
    }

##html

全选

清除checkbox默认样式后，使用:checked伪类选择器，被选中时设置其背景色，并用内阴影产生间距
**所有主流浏览器都不支持appearance属性，Firefox支持替代的-moz-appearance属性，Safari和Chrome支持替代的-webkit-appearance属性**若浏览器不支持此属性则显示默认样式
<br>
参考资料
[改变checkbox的默认样式](https://www.cnblogs.com/yuanyanbk/p/8136682.html)