JavaScript简单实现全选反选框

偷个懒~ 样式就不写了,直接上HTML
<table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="allOrNot">
                </th>
                <th>菜名</th>
                <th>饭店</th>
            </tr>
        </thead>    

        <tbody id="tbody">
            <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>西红柿鸡蛋</td>
            <td>土豆丝</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>西红柿鸡蛋</td>
            <td>土豆丝</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>西红柿鸡蛋</td>
            <td>土豆丝</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>西红柿鸡蛋</td>
            <td>土豆丝</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>西红柿鸡蛋</td>
            <td>土豆丝</td>
        </tr>
        </tbody>
    </table>
script
window.onload = function(){
        var topInp = document.getElementById("allOrNot");
        var tbody = document.getElementById("tbody");
        var inputList = tbody.getElementsByTagName("input");
 //全选框选了之后,下面的框全选
        topInp.onclick = function(){
            for( var i=0; i<inputList.length; i++ ){
                inputList[i].checked = this.checked;
            }
        }
    }
//给下面的所有小框框绑定事件(可以考虑事件委托)
for( var j=0; j<inputList.length; j++ ){
            inputList[j].onclick = function(){
                // 假设所有选框都选了
                var flag = true;
                for( var k=0; k<inputList.length; k++ ){
                    // 如果有一个选框没选
                    if( inputList[k].checked === false ){
                        // 把标志设为false
                        flag = false;
                    }
                }
                // 让全选框设为标志
                topInp.checked = flag;
            }
        }

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值