<!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
span标签模拟input checkbox实现父子级选中同步,vuejs数据绑定
最新推荐文章于 2022-11-06 14:16:17 发布
本文展示了如何使用VueJS和span标签来模拟input checkbox,实现父子级选中状态的同步。通过点击父级选项可以切换所有子选项的选中状态,而点击子选项则会相应改变其父级选项的选中状态。代码中包含详细的CSS样式和VueJS数据绑定及方法。
摘要由CSDN通过智能技术生成