jQuery支持下的全选按钮与全不选操作

jQuery支持下的全选按钮与全不选操作

效果如下：

全选按钮设置

引入jQuery

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>

全选按钮：

<input type="checkbox" id="all" οnclick="allClick()" style="margin-left: 50px">&nbsp;&nbsp;全选

每一个按钮：

<input type="checkbox" name="ck" id="ck"
       value="${p.pId}" οnclick="ckClick()">

点击事件

<script type="text/javascript">
    function allClick() {
        //取得全选复选框的选中未选 中状态
        var ischeck = $("#all").prop("checked");
        //将此状态赋值给每个商品列表里的复选框，each循环选中状态
        $("input[name=ck]").each(function () {
            this.checked = ischeck;
        });
    }

    function ckClick() {
        //取得所有name=ck的被选中的复选框
        var length = $("input[name=ck]:checked").length;
        //取得所有name=ck的复选框
        var len = $("input[name=ck]").length;
        //比较
        if (len == length) {
            $("#all").prop("checked", true);
        } else {
            $("#all").prop("checked", false);
        }
    }
</script>