<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CheckBox多选,全选</title>
<style>
.App-TimeL {
width: 100%;
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: #fff;
}
.App-TimeS {
width: 50%;
height: 40px;
line-height: 40px;
display: flex;
display: -webkit-flex;
justify-content: center;
}
.App-input-checkbox {
width: 30px;
height: 30px;
-webkit-appearance: none;
outline: none;
border: none;
}
.App-input-checkbox::after {
padding-top: 10px;
height: 40px;
left: 0;
top: 0;
content: url("../../img/town/check.png");
}
.App-input-checkbox:checked:after {
padding-top: 10px;
height: 40px;
left: 0;
top: 0;
content: url("../../img/town/check_in.png");
}
.App-timeLabel {
display: inline-block;
height: 30px;
padding: 0 0 0px 10px;
}
.all{
height: 40px;
line-height: 40px;
margin: 10px 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="all" @click="checkAll">全选</div>
<div class="App-TimeL">
<div class="App-TimeS" v-for="t in TimeList" :key="t.id">
<!-- :checked="fruitIds.indexOf(t.id)>=0" -->
<input type="checkbox" class="App-input-checkbox" @click="TimeClick(t)"
:checked="TimeSelected.indexOf(t.id)>=0">
<span class="App-timeLabel">{
<!DOCTYPE html>
<html lang="en">
<head>
阅读背景：
[Vue]用图片修改CheckBox样式，实现全选多选_iChangebaobao的博客_vue修改checkbox样式
来源：互联网
分享到：
