Html checkbox全选

html中全选

<table class="data-table td-center">
                             <tr>
                                <td><input type="checkbox" id="ckAll" name="checkAll"  />全选</td>
                                <td>编号</td>
                                <td>姓名</td>
                                <td>班级</td>
                                <td>年龄</td>
                                <td>邮箱</td>
                                <td>操作</td>
                             </tr>
                             <tr>
                                <td><input type="checkbox" name="checkItem" onclick="checkOne(this)"/></td>
                                <td>1</td>
                                <td>张三</td>
                                <td>2班</td>
                                <td>12</td>
                                <td>zs@qq.com</td>
                                <td><a href='javascript:void(0);'>删除</a></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="checkItem" onclick="checkOne(this)" /></td>
                                <td>2</td>
                                <td>李四</td>
                                <td>1班</td>
                                <td>11</td>
                                <td>ls@qq.com</td>
                                <td><a href='javascript:void(0);'>删除</a></td>
                            </tr>
                        </table>

jquery 代码

 $(document).ready(function () {
            $("input[name=checkAll]").click(function () {
                if (this.checked)
                    $("input[name=checkItem]").prop("checked", true);
                else
                    $("input[name=checkItem]").prop("checked", false);
            });

            $("#ckAll").click();
        })


        function checkOne(ths) {
            if (ths.checked == false)
                $("input[name=checkAll]").prop("checked", false);
            else {
                var count = $("input[name=checkItem]:checkbox:checked").length;
                if (count == $("input[name=checkItem]:checkbox").length) {
                    $("input[name=checkAll]").prop("checked", true);
                }
            }
        }

 

转载于:https://www.cnblogs.com/ZJ199012/p/10469678.html