这是我的html代码
<div class="row-div" v-for="user in UserList">
<div style="width: 25%" class="name-checkbox">
<div class="square">
<input id="chk1" name="chk" type="checkbox">
<label for="chk1">
</label>
</div>
<div>
{{user.firstName}} {{user.lastName}}
</div>
</div>
我现在正在使用 v-for,但是如果我单击第一个方块以外的任何其他方块,第一个方块将被激活,而不是相应的复选框
您可以使用
CSS执行此操作,请查看下面的更新代码段。
.square input[type=checkbox] {
display: none;
}
.square {
display: inline;
margin-right: 10px;
}
.square input[type=checkbox] + label{
padding-left: 20px;
line-height: 20px;
height: 20px;
border: 1px solid #ccc;
}
.square input[type=checkbox]:checked + label {
background: black url(http://www.clker.com/cliparts/R/C/5/I/G/P/green-light-tick-mark-md.png) no-repeat center center;
background-size: 16px auto;
}
<div class="square"><input id="chk" name="chk" type="checkbox"><label for="chk"></label></div>
<div class="square"><input id="chk1" name="chk" type="checkbox"><label for="chk1"></label></div>
<div class="square"><input id="chk2" name="chk" type="checkbox"><label for="chk2"></label></div>
<div class="square"><input id="chk3" name="chk" type="checkbox"><label for="chk3"></label></div>
<div class="square"><input id="chk4" name="chk" type="checkbox"><label for="chk4"></label></div>