全选框

思路

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


猜你喜欢

转载自www.cnblogs.com/Grani/p/9998646.html