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>
![](/i/l/?n=22&i=blog/2107107/202208/2107107-20220811131036385-670284760.png)
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>
标签:checkbox,标签,label,密码,点击,Html,input,记住
From: https://www.cnblogs.com/liyhbk/p/16575729.html