Html实现点击文字标签同时选中checkbox

1. 问题描述

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

 <div class="rem">
     <input id="checkbox" style="vertical-align:middle; margin-top: 3px" type="checkbox" name="checkbox" />
     <label style="vertical-align:middle" for="checkbox">记住密码</label>
</div>

2. 解决方法

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

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

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

 2. abel联动checkbox时，若label包含在checkbox外层时label不需for属性，设置label的display属性为block时可以使整个div联动

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