1、实现的代码如下：第一种方法：文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。
实现代码如下：
<input type="checkbox" id="check1" value="123" name="name" class="check">
<label for="check1">姓名</label>
<br>
<input type="checkbox" id="check2" value="456" name="name" class="check">
<label for="check2">密码</label>
2、第二种方法：把文字和checkbox包含在<label>标签内
代码如下：
<label><input type="checkbox" id="11" class="check" /> 测试</label>
3、全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin:0;padding:0; list-style: none;font-family: '微软雅黑'}
.box {width: 400px; overflow: hidden; padding: 20px;}
input,label{vertical-align:middle;}
.check {width: 18px; height: 18px;}
label{font-size: 18px;}
</style>
</head>
<body>
<div>
<form>
<!--第一种:文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同. -->
<input type="checkbox" id="check1" value="123" name="name">
<label for="check1">姓名</label>
<br>
<input type="checkbox" id="check2" value="456" name="name">
<label for="check2">密码</label>
<br>
<!-- 第二种:把文字和checkbox包含在<label>标签内 -->
<label><input type="checkbox" id="11" /> 测试</label>
</form>
</div>
</body>
</html>
