一个简单的checkbox全选实现

最新推荐文章于 2021-11-04 15:22:43 发布

原创最新推荐文章于 2021-11-04 15:22:43 发布 · 746 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox全选 #checkbox

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的全选功能实现方案，使用HTML和基于jQuery的JavaScript代码。通过为表格中的复选框绑定点击事件来实现全选与反选的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全选是很多项目中必要有的代码块
不多说直接上代码
html代码

<body>
    <table>
        <tr>
            <th><input type='checkbox' id='allcheck'/></th>
            <th>你喜欢什么</th>
        </tr>
        <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>
    </table>
</body>

javascript（基于jQuery）

    $(function(){
    //获取所有的除了全选的checkbox
    var cks= $(':checkbox:gt(0)');
    //给全选checkbox绑定click事件
    var allcheck=$('#allcheck').click(function(){
        //让所有非全选checkbox checked状态和全选checkbox一致
        cks.prop("checked", $(this).prop("checked"));
    })
    //每个非全选checkbox绑定事件
    cks.click(function(){
        if(!$(this).prop('checked')){
            //有不是选中的则修改全选的未非选中
            allcheck.prop('checked',false);
        }else{
            //检查所有的非全选的checkbox是否是选中的
            if(cks.filter($(':not(:checked)')).length==0){
                allcheck.prop('checked',true);
            }
        }
    })
    })

觉得有问题请指正！