span标签模拟input checkbox实现父子级选中同步，vuejs数据绑定

最新推荐文章于 2022-11-06 14:16:17 发布

编号90015478

最新推荐文章于 2022-11-06 14:16:17 发布

阅读量2.1k

点赞数 2

分类专栏： javascript vue.js学习记录2

本文链接：https://blog.csdn.net/qq_20353887/article/details/79637176

版权

本文展示了如何使用VueJS和span标签来模拟input checkbox，实现父子级选中状态的同步。通过点击父级选项可以切换所有子选项的选中状态，而点击子选项则会相应改变其父级选项的选中状态。代码中包含详细的CSS样式和VueJS数据绑定及方法。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
    <!-- <link rel="stylesheet" href="index.css"> -->
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        margin-left: 30px;
        margin-top: 10px;
    }

    div span {
        width: 16px;
        height: 16px;
        border: 1px solid #d9d9d9;
    }

    div.parent {
        display: flex;
    }

    div.block {
        border-bottom: 1px solid #d9e2e8;
        padding-bottom: 10px;
    }

    div span.checkbox {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        background-color: #fff;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    div span.checkbox:hover {
        border: 1px solid #1890ff;
        cursor: pointer;
    }

    div span.check_inner {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        -webkit-transition: all .3s;
        transition: all .3s;
        background-color: #1890ff;
        border-color: #1890ff;
    }

    div span.check_inner:after {
        transform: rotate(90deg) scale(1);
        position: absolute;
        left: 7px;
        top: 3px;
        display: table;
        /* width: 5.71428571px

最低0.47元/天解锁文章

编号90015478

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
span标签模拟input checkbox实现父子级选中同步，vuejs数据绑定

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src="https://unpkg.com/vue@2.4.4
复制链接

扫一扫