用jQuery实现复选框的全选、全不选、和反选

最新推荐文章于 2022-03-23 22:03:57 发布

weixin_30764771

最新推荐文章于 2022-03-23 22:03:57 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/feixiang92/p/5190595.html

本文介绍使用jQuery实现HTML表格中全选与全反选功能的方法。通过点击“全选”按钮，可以实现所有复选框的选择状态切换；点击“全反选”按钮，则反转所有复选框的状态。

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

用一个例子来说明一下，html页面代码如下

<table border="1" align="center">
        <thead>
            <tr>
                <th>状态</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" /></td>
                <td>李</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>周</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td><input type="checkbox" /> 全选</td>
                <td><input type="button" value="全反选" /></td>
            </tr>
        </tfoot>
    </table>

在浏览器中的效果是这样的：

要实现单击“全选”前面的那个复选框实现全选和全不选的切换，我用的jQuery版本是1.12.0，刚开始的思路是这样的：

$("tfoot tr input:first").click(function(){
            if($(this).is(":checked")){ //判断复选框是否被选中
                $("table :checkbox").attr("checked","checked");
            }
            else{
                $("table :checkbox").removeAttr("checked");
            }    
        });

这么写的话全选只能执行一次，什么意思呢，截图更明白些

（第一次“全选”有效），（第一次“全不选”也有效），（第二次“全选”就无效了）

这是因为移除checked属性时浏览器产生了错误。所以以上的这种方法不适用。

以下这种方法是有效的：

$("tfoot tr input:first").click(function(){
            if($(this).is(":checked")){
                $("table :checkbox").prop("checked",true);
            }
            else{
                $("table :checkbox").prop("checked",false);
            }
        });

这里用了prop方法来设置属性。

接下来“反选”也可以用prop这个方法来做：

$("tfoot tr input:last").click(function(){
            $("table :checkbox").each(function(){
                if($(this).is(":checked")==false){
                    $(this).prop("checked",true);
                }
                else{
                    $(this).prop("checked",false);
                }
            });
        });