点击文字同时选中checkbox

1. 问题描述

1. 在开发过程中很常用的会实现 记住密码 功能，实现点击文字的时候选中复选框

<div>
     <input type="checkbox" name="checkbox" />
     <label>记住密码</label>
</div>

2. 解决方法

2.1 只有一个复选框

1. 将 input 和 label 放在同一个div中同时lable的for属性的值等于input的id属性值就可以实现点击label同时控制input 

<div>
    <input type="checkbox" id="c2">
    <label for="c2">记住密码</label>
</div>

<div>
     <input id="checkboxId" style="vertical-align:middle" type="checkbox" name="checkbox" />
     <!--使用label的for属性，但要匹配上checkbox的id,实现联动-->
     <!--onselectstart禁止双击选中-->
     <label style="vertical-align:middle" for="checkboxId" onselectstart="return false">记住密码</label>
</div>

2. 如果出现 复选框 和 文字 不对齐，在复选框和文字同时添加样式即可

style="vertical-align:middle"

2.2 使用 v-for 有多个复选框

1.  把文字和checkbox包含在<label>标签内

<div v-for="(item, index) in list" :key="index">
    <label>
        <input class="checkbox-button" type="checkbox" :value="item" @click="checkData(item)">
        <span class="checkbox-span">{{ item.name }}</span>
    </label>
</div>

2. 添加样式

.checkbox-button {
    margin-right: 4px;
    vertical-align: middle;
}
.checkbox-span {
    vertical-align: middle;
}