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

Posted 2020-06-13

用一个例子来说明一下，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);
                }
            });
        });

当然，这个例子还有很多不完善的的地方，这里主要是说明我遇到的主要的问题，其余的情况就不在这里讨论了。