zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    CODEFORCES-CONTEST653-D. Delivery Bears
    CodeForces 1244C-exgcd?
    洛谷P3948
    L2-010 排座位 (25 分) (最短路)
    L2-008 最长对称子串 (25 分) (模拟)
    L2-007 家庭房产 (25 分) (并查集)
    L2-005 集合相似度 (25 分) (STL——set)
    L2-002 链表去重 (25 分) (模拟)
    L2-001 紧急救援 (25 分) (最短路+路径打印)
    hiho 1098 最小生成树二·Kruscal算法 (最小生成树)
  • 原文地址:https://www.cnblogs.com/lsLNN/p/9599805.html
Copyright © 2011-2022 走看看