全选框

思路

获取全选框的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()

修改checkbox样式

css

  label{
            font-size: 18px;
            cursor: pointer;
        }
        input[type='checkbox']{
            width: 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

<label class="checkBox"><input type="checkbox">全选</label>

清除checkbox默认样式后，使用:checked伪类选择器，被选中时设置其背景色，并用内阴影产生间距
所有主流浏览器都不支持appearance属性，Firefox支持替代的-moz-appearance属性，Safari和Chrome支持替代的-webkit-appearance属性若浏览器不支持此属性则显示默认样式


参考资料
改变checkbox的默认样式

转载于:https://www.cnblogs.com/Grani/p/9998646.html