JS 全选

第一种情况

1. 首先得有全选  checkall

<input type="checkbox" class="checkAll" value="on" id="checkall">

2.子选择框也要有  并且得name命名  

<input class="inputList" value="@item.id" style="width: 13px; height: 13px;" type="checkbox" name="checkitem">

3.写js样式

   ////全选
    $("#checkall").click(function () {
        if (this.checked) {                 //如果当前点击的多选框被选中
            $('input[type=checkbox][name=checkitem]').prop("checked", true);
        } else {
            $('input[type=checkbox][name=checkitem]').prop("checked", false);
        }
    });
    $('input[type=checkbox][name=checkitem]').click(function () {
        var flag = true;
        $('input[type=checkbox][name=checkitem]').each(function () {
            if (!this.checked) {
                flag = false;
            }
        });
        if (flag) {
            $('#checkall').prop('checked', true);
        } else {
            $('#checkall').prop('checked', false);
        }
    });

第二种情况 layui框架下的

tableCheck = {
        init: function () {
            $(".layui-form-checkbox").click(function (event) {
                var a = $(".layui-form-checkbox").not('.header').length;
                var b = $('.layui-form-checked').not('.header').length + 1;
                if (a === b) {
                    $(".header").addClass('layui-form-checked');
                }
                if ($(this).hasClass('layui-form-checked')) {
                    $(this).removeClass('layui-form-checked');
                    if ($(this).hasClass('header')) {
                        $(".layui-form-checkbox").removeClass('layui-form-checked');
                        $(".header").removeClass('layui-form-checked');
                    }
                    var flag = true;
                    $('.layui-form-checkbox').each(function () {
                        if (!$(this).hasClass('layui-form-checked')) {
                            flag = false;
                        }
                    });
                    if (flag) {
                        $("#All").addClass('layui-form-checked');
                    } else {
                        $("#All").removeClass('layui-form-checked');
                    }


                } else {
                    $(this).addClass('layui-form-checked');
                    if ($(this).hasClass('header')) {
                        $(".layui-form-checkbox").addClass('layui-form-checked');
                    }
                }
            });
        },
       
        getData:function  () {
            var obj = $(".layui-form-checked").not('.header');
            var arr=[];
            obj.each(function(index, el) {
                arr.push(obj.eq(index).attr('data-id'));
            });
            return arr;
        }
    }

在前端页面加一个id

 <div class="layui-unselect header layui-form-checkbox" lay-skin="primary" id="All"><i class="layui-icon">&#xe605;</i></div>

posted @ 2018-09-06 17:31  lnnlern  Views(130)  Comments(0Edit  收藏  举报