html实现带全选功能复选框的Listview页面

其他 2020-04-05 18:20:17 阅读次数: 0

该页面是在上一篇Listview页面的基础上进一步优化实现的，上一篇博客：html实现简单ListViews效果

实现效果：
在这里插入图片描述

html代码（引用了layui的按钮样式，自己写的样式文件为ListViewTest2.css，见下文）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="ListViewTest2.css">

    <script>
        $(function () {

            //实现点击变深色效果
            $(".checkStatus").click(function () {
                if($(this).hasClass("layui-btn-primary")){
                    $(this).removeClass("layui-btn-primary");
                    $(this).addClass("layui-btn-normal");
                }
                else if($(this).hasClass("layui-btn-normal")){
                    $(this).removeClass("layui-btn-normal");
                    $(this).addClass("layui-btn-primary");
                }
            });

            //实现全选反选效果
            $("#head-all").click(function () {
                console.info($(this).prop("checked"));
                if($(this).prop("checked")===true){
                    $(".gcs-checkbox").prop("checked",true);
                }
                else{
                    $(".gcs-checkbox").prop("checked",false);
                }
            })
        })
    </script>
<!--    这里使用了layui的样式，实际使用时需要改成实际路径-->
    <link rel="stylesheet" href="../LayuiTest/layui/css/layui.css">
</head>
<body>

<div id="mainContentDiv">

    <div class="mainDivMainImgDiv" style="">
        <div class="headLeftDiv headLeftDivFont">我收到的</div>

        <div class="headRightDiv">
            <div class="layui-inline">
                <input class="layui-input" style="width: 250px; font-size:15px" name="id" id="demoReload" placeholder="搜索合同主题、发起人姓名" autocomplete="off">
            </div>
            <button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
        </div>

        <div class="link-top"></div>
        <div class="headLineBlowDiv">
            <div class="headLeftDiv">状态：</div>
            <div class="headButtonDiv">
                <button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">填写中</button>
                <button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">签署中</button>
                <button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">已完成</button>
                <button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">已撤回</button>
                <button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">已拒绝</button>
                <button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">已过期</button>

            </div>


        </div>

    </div>

    <div class="mainDivMainInfoiv" style="">

        <div class="mainDivHeadDiv" style="position: absolute; left: 0%; top: 0%;">


            <div class="mainDivHeadCheckDiv">
                <input type="checkbox" id="head-all" class="gcs-checkbox">
                <label for="head-all"></label>
            </div>


            <div class="mainDivHeadLeftText flexFont" style="">
                全选本页
            </div>

            <div class="mainDivHeadRightText flexFont" style="">
                共7条
            </div>



        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 5%;">
            <div class="mainDivCheckDiv">
                <input type="checkbox" id="1" class="gcs-checkbox">
                <label for="1"></label>
            </div>

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人：张三

            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人：张三，李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="color: #6db56d;">
                已完成
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 18%;">
            <div class="mainDivCheckDiv">
                <input type="checkbox" id="2" class="gcs-checkbox">
                <label for="2"></label>
            </div>

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人：张三

            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人：张三，李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="color: #6db56d;">
                已完成
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 31%;">
            <div class="mainDivCheckDiv">
                <input type="checkbox" id="3" class="gcs-checkbox">
                <label for="3"></label>
            </div>

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人：张三

            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人：张三，李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="color: #6db56d;">
                已完成
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>


        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 44%;">
            <div class="mainDivCheckDiv">
                <input type="checkbox" id="4" class="gcs-checkbox">
                <label for="4"></label>
            </div>

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人：张三

            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人：张三，李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="">
                已撤回
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 57%;">
            <div class="mainDivCheckDiv">
                <input type="checkbox" id="5" class="gcs-checkbox">
                <label for="5"></label>
            </div>

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人：张三

            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人：张三，李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="color: #6db56d;">
                已完成
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 70%;">
            <div class="mainDivCheckDiv">
                <input type="checkbox" id="6" class="gcs-checkbox">
                <label for="6"></label>
            </div>

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人：张三

            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人：张三，李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="">
                已撤回
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 83%;">
            <div class="mainDivCheckDiv">
                <input type="checkbox" id="7" class="gcs-checkbox">
                <label for="7"></label>
            </div>

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人：张三

            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人：张三，李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="">
                已撤回
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>





    </div>
</div>

</body>
</html>

css样式文件代码（ListViewTest2.css）


body {
    background: whitesmoke;

}

#mainContentDiv {
    position: absolute;
    width: 70%;
    height: 100%;
    background: whitesmoke;
    top: 10%;
    left: 10%;

}

.mainDivMainImgDiv {
    position: absolute;
    width: 100%;
    height: 120px;
    background: white;

}

.mainDivMainInfoiv {

    position: absolute;
    width: 100%;
    height: 100%;
    background: whitesmoke;

    top: 130px;
}

.headLeftDiv {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 4%;
    top: 25%;
}

.headLeftDivFont {
    font-weight: 500;
    /*line-height: 58px;*/
    font-size: 20px;
    color: #333;
}

.headRightDiv {
    position: absolute;
    width: 40%;
    height: 100%;
    right: 2%;
    top: 20%;
}


/*中间的过度的横线*/
.link-top {
    position: absolute;
    top: 60%;
    left: 4%;
    width: 90%;
    height: 1px;
    border-top: solid #e8edf3 1px;
}

.headLineBlowDiv {
    position: absolute;
    top: 63%;
    height: 40%;
    width: 100%;


}

.headButtonDiv {

    position: absolute;
    top: 21%;
    left: 9%;

}


/*复选框*/
.gcs-checkbox {
    display: none;
}
.gcs-checkbox+label {
    background-color: white;
    border-radius: 0px;
    border: 1px solid #d3d3d3;
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    line-height: 15px;
}
.gcs-checkbox+label:hover {
    cursor: pointer;
    border: 1px solid #2783FB;
}
.gcs-checkbox:checked+label {
    background-color: #eee;
    background: #2783FB;
}
.gcs-checkbox:checked+label:after {
    content: "\2714";
    color: white;
}
/*---------------------------subInfoDiv--------------*/
.mainDIvMainInfoDivSubInfoDiv {
    position: absolute;
    width: 100%;
    height: 13%;
    background: white;
    border: 1px solid #eaeaea;
}

.mainDivHeadDiv {
    position: absolute;
    width: 100%;
    height: 5%;
    background: white;
    border: 1px solid #eaeaea;
}

/*复选框div*/
.mainDivHeadCheckDiv{

    position: absolute;
    left: 1%;
    top: 30%;
    z-index: 15;
}

.mainDivHeadLeftText {
    position: absolute;
    top: 30%;
    left: 4%;
    width: 95%;
    height: 20%;
    background: rgba(0, 0, 0, 0);

}

.mainDivHeadRightText {
    position: absolute;
    top: 30%;
    right: 1%;
    width: 5%;
    height: 20%;
    background: rgba(0, 0, 0, 0);

}

/*子类复选框的div*/
.mainDivCheckDiv{
    position: absolute;
    left: 1%;
    top: 18%;
    z-index: 15;
}

.mainDIvMainInfoDivSubInfoDiv:hover {
    background: rgba(0, 0, 0, 0.05);
}


.mainDivMainInfoiv_HeadTextDiv {
    position: absolute;
    top: 10%;
    left: 4%;
    width: 30%;
    height: 30%;
    background: rgba(0, 0, 0, 0);

}

.mainDivMainInfoiv_mainTextDiv {
    position: absolute;
    top: 52%;
    left: 4%;
    width: 95%;
    height: 20%;
    background: rgba(0, 0, 0, 0);

}


.mainDivMainInfoiv_TrailTextDiv {

    position: absolute;
    bottom: 3%;
    left: 4%;
    width: 30%;
    height: 30%;
    background: rgba(0, 0, 0, 0);
}


.mainDivMainInfoiv_HeadTextDiv_TextBox {
    position: absolute;
    top: 25%;
    width: 100%;
    height: 50%;

    background: rgba(0, 0, 0, 0);

}

.cardInfoTitle {
    font-weight: 700;
    /*color: #1f264d;*/
    height: 22px;
    display: inline-block;
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.flexFont {
    display: flex;
    font-size: 12px;
    color: rgb(102, 102, 102);
    height: 20px;
}

.rightFlexFont {
    color: #b3b3b3;
    font-weight: 500;
    text-align: right;
    font-size: 12px;
    color: rgb(179, 179, 179);
}

.InfoDiv_Right_1 {
    position: absolute;
    top: 30%;
    right: 2%;
    width: 30%;
    height: 30%;
    background: rgba(0, 0, 0, 0);
}

.InfoDiv_Right_2 {
    position: absolute;
    top: 55%;
    right: 2%;
    width: 30%;
    height: 30%;
    background: rgba(0, 0, 0, 0);
}


.mainDivMainInfoiv_TrailTextDiv_TextBox {
    position: absolute;
    top: 25%;
    width: 100%;
    height: 50%;

    background: rgba(0, 0, 0, 0);

}

.mainDivMainInfoiv_mainTextDiv_TextBox {
    position: absolute;
    top: 25%;
    width: 100%;
    height: 50%;

    background: rgba(0, 0, 0, 0);

}

参考：
css实现好看的单选按钮和复选框

知北行
发布了68 篇原创文章 · 获赞 12 · 访问量 2万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_35077107/article/details/104677408
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022