jQuery实现下拉框并且带有复选框功能

最新推荐文章于 2024-07-19 03:19:36 发布

MM_GS

最新推荐文章于 2024-07-19 03:19:36 发布

阅读量2.9k

点赞数

分类专栏：前端文章标签： jQuery

本文链接：https://blog.csdn.net/MM_GS/article/details/102722631

版权

本文介绍了一种在项目中实现下拉框并带有复选框功能的方法，由于未能找到合适的现成插件，作者选择自行编写。通过这个博客，作者分享了其实现过程，并提供了实现效果的截图。尽管是初次尝试，但作者发现该功能实现并不复杂，且未添加详细注释。

摘要由CSDN通过智能技术生成

因为项目上的需要，需要实现一个下拉框并且带有复选框功能，在网上找了找插件，没有找到合适的，所以就自己动手写了一个。写这个博客也相当于备份吧。

效果图如下：

这东西虽然没写过，但实际并不难所以也就没加什么注释了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
    /* 下拉复选框开始 */
    .multiple-parent label {
        font-size: 16px;
    }
    .multiple-parent input[type='checkbox'] +label:before{
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 1px solid rgba(0,222,255,1);
        border-radius: 3px;
        margin-right: 3px;
        margin-left: 14px;
    }
    .multiple-parent input[type='checkbox']:checked + label:before{
        background-color: #00DEFF;
        content: "\2714";
        text-align: center;
        font-size: 12px;
        color: #fff;
        line-height: 13px;
        
    }
    .multiple-parent input[type="checkbox"]{
        display: none;
    }
    .multiple-parent{
        display: none; 
        width: 450px;
    }
    .multiple-parent ul{
        list-style: none;
        width:100%;
        text-align: left;
        border:1px solid rgba(11,212,255,.93);
        border-radius:4px;
        background:rgba(9,86,150,.27);
        padding-left: 5px;
        box-sizing: border-box;
        height:230px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    /*滚动条样式*/
    .multiple-parent ul::-

最低0.47元/天解锁文章

MM_GS

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
jQuery实现下拉框并且带有复选框功能

因为项目上的需要，需要实现一个下拉框并且带有复选框功能，在网上找了找插件，没有找到合适的，所以就自己动手写了一个。写这个博客也相当于备份吧。效果图如下：这东西虽然没写过，但实际并不难所以也就没加什么注释了。<!DOCTYPE html><html lang="en"><head> <meta charset...
复制链接

扫一扫

专栏目录