javascript事件案例-全选框案例

冰暮流星2026-04-28 21:23

这里要求全选框是点中全选框，下面的复选框自动选中，再点击就取消选中。

如果下面复选框都选中，则上面全选框自动选中

思路：

复选框的checked的值是布尔类型，选中是true,没选是false

如果全选的checked的值变为什么,则下面复选框的checked值同步变为什么。

要实现下面复选框选中，则全选自动选中，可以假设全选先被选中，再检查复选框，只要有一个没有选中，则全选就取消选中

先制作复选框与全选的html案例

html 复制代码

    <table id="tbl">
        <thead>
            <tr>
                <th>全选：<input type="checkbox" name="" id="all"></th>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>1</td>
                <td>tom</td>
                <td>age</td>
                <td>meal</td>
                <td>eat</td>
            </tr>
            <tr>
               <td><input type="checkbox" name="item"></td>
                <td>2</td>
                <td>jack</td>
                <td>age</td>
                <td>meal</td>
                <td>eat</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>3</td>
                <td>alic</td>
                <td>age</td>
                <td>meal</td>
                <td>eat</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>4</td>
                <td>mike</td>
                <td>age</td>
                <td>meal</td>
                <td>eat</td>
            </tr>
        </tbody>
    </table>

css效果代码

css 复制代码

 #tbl {
            width: 500px;
            height:200px;
            margin:0 auto;
            border-collapse: collapse;
        }
        td,th{
            border:1px solid #ccc;
        }

        tbody tr{
            text-align: center;
        }

效果如下图

javascript代码如下

javascript 复制代码

window.onload=function()
        {
        //全选框被选中，下面复选框一起选中，反之，全选框取消，复选框也取消选择
            let all=document.getElementById("all")
            all.onchange=function()
            {
                let items=document.getElementsByName("item")
                for(let item of items)
               {
                item.checked=this.checked
               }
            }
            //当下面复选框都被选中，则实现全选被选中
            let items=document.getElementsByName("item")
            for(let item of items)
            {
                item.onchange=function()
                {
                    //先假定全选被选中，只要有一个没有被选中，全选就取消
                    all.checked=true
                    for(let item of items)
                    {
                        if(!item.checked)
                       {
                        all.checked=false
                        break
                       }
                    }
                }
            }

        }