JavaScript简单实现全选反选框

最新推荐文章于 2024-04-02 19:39:43 发布

乌鲁托拉曼

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量594

点赞数

分类专栏： JavaScript学习之路

本文链接：https://blog.csdn.net/lizhengxv/article/details/79735435

版权

JavaScript学习之路专栏收录该内容

43 篇文章 2 订阅

订阅专栏

偷个懒~ 样式就不写了，直接上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;
            }
        }