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>

  • 相关阅读:
    K2新网站(官网和BPM社区)正式上线了
    在线体验K2 BPM微信审批
    K2 BPM + SAP,实现全方面管理企业
    KStar ----BPM应用框架,K2 的新星
    SharePoint加K2,将Portal系统与BPM系统完美整合!
    迈瑞综合应用及流程管理平台项目
    深度学习教程网站
    Pytorch自定义参数层
    pytorch BCELoss和BCEWithLogitsLoss
    Some helper functions for PyTorch
  • 原文地址:https://www.cnblogs.com/lsLNN/p/9599805.html
Copyright © 2011-2022 走看看