html - 我通过在内部有一个勾号的外部 div 制作了一个自定义复选框..现在没有应用事件类

Question

这是我的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，但如果我点击第一个以外的任何其他方 block ，第一个方 block 将被激活，而不是相应的复选框

Answer 1

您可以使用 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>