• JS 全选


    第一种情况

    1. 首先得有全选  checkall

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

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

    <input class="inputList" value="@item.id" style=" 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>

  • 相关阅读:
    算法系列二:排序
    算法系列一:简单排序
    自己实现数据结构系列五---BinarySearchTree
    自己实现数据结构系列四---Queue
    自己实现数据结构系列三---Stack
    自己实现数据结构系列二---LinkedList
    自己实现数据结构系列一---ArrayList
    栈--数组实现
    RequestHolder工具类
    IP工具类
  • 原文地址:https://www.cnblogs.com/lsLNN/p/9599805.html
Copyright © 2020-2023  润新知