Jquery之复选框checkbox综合练习

最新推荐文章于 2022-04-10 18:59:34 发布

broccoli2

最新推荐文章于 2022-04-10 18:59:34 发布

阅读量409

点赞数

分类专栏： jquery 文章标签： jquery checkbox

本文链接：https://blog.csdn.net/broccoli2/article/details/76802259

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先创建test.html文件，内容如下：
这里用的jQuery版本是jquery-1.8.2.js,
点击下载

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
    </head>
    <body>
        <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>

        <script type="text/javascript">
            //全选中和全取消
            //定位tfoot中的全选复选框，同时添加单击事件
            $("tfoot input:checkbox").click(function(){
                //获取该全选复选框的状态
                var flag = this.checked; 
                //如果选中
                if(flag){
                    //将tbody中的所有复选框选中
                    $("tbody input:checkbox").attr("checked","checked");
                //如果未选中
                }else{
                    //将tbody中的所有复选框取消
                    $("tbody input:checkbox").removeAttr("checked");
                }
            });

        </script>

        <script type="text/javascript">
            //全反选
            //定位tfoot标签中的全反选按钮，同时添加单击事件
            $("tfoot input:button").click(function(){
                //将tbody标签中的所有选中的复选框失效
                $("tbody input:checkbox:checked").attr("disabled","disabled");
                //将tbody标签中的所有生效的复选框选中
                $("tbody input:checkbox:enabled").attr("checked","checked");
                //将tbody标签中的所有生效的复选框生效且设置为未选中
                $("tbody input:checkbox:disabled").removeAttr("disabled").removeAttr("checked");
            });

        </script>

    </body>
</html>