jquery简单实现复选框的全选与反选

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>全选与反选</title>
        <!--此处引入的css与js需要更换成你本地的地址-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="jquery-2.0.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                /*全选与反选按钮*/
                $("#all").click(function() {
                    var state = $("#all").prop("checked");
                    if(state == true) {
                        $("[name='option']").prop("checked", "checked");
                    } else {
                        $("[name='option']").prop("checked", "");
                    }
                });
                /*------------------------------------------------------------------------------------*/
                /*根据复选框是否全部选中来判断全选框是否选中*/
                //获取当前页面数据条数
                var options = $("[name='option']");
                //给每一个复选框加上click事件
                $("input[name='option']").click(function() {
                    //获取当前选中的复选框个数
                    var i = $("input[name='option']:checked");
                    //判断复选框选中个数是否等于当前页面数据条数
                    if(i.length == options.length) { //如果两者值相等那么全选按钮也会选中
                        $("#all").prop("checked", "checked");
                    } else { //当两者值不相等时全选框便不会显示选中
                        $("#all").prop("checked", "");
                    }
                });

            });
        </script>
    </head>

    <body>
        <div class="panel panel-default">
            <div class="panel-heading">数据字典</div>
            <div class="panel-body">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr class="active">
                            <th style="width: 2%;"><input type="checkbox" id="all"></th>
                            <th style="width: 28%;">字典ID</th>
                            <th style="width: 15%;">字典key</th>
                            <th style="width: 15%;">字典value</th>
                            <th style="width: 15%;">创建时间</th>
                            <th style="width: 25%;">编辑</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="checkbox" name="option"></td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs">编辑</button>
                                <button type="button" class="btn btn-danger btn-xs">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="option"></td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs">编辑</button>
                                <button type="button" class="btn btn-danger btn-xs">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="option"></td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs">编辑</button>
                                <button type="button" class="btn btn-danger btn-xs">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="option"></td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs">编辑</button>
                                <button type="button" class="btn btn-danger btn-xs">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="pull-right">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>
                        <li>
                            <a href="#">5</a>
                        </li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </body>

</html>