HTML5 - 点击标签文字自动选中对应的checkbox、radio
作者：hangge | 2017-01-30 08:10
复选框（checkbox）和单选框（radio）在 web 开发中比较常用到。但这两个组件是不带文字的，所以我们通常会在其旁边添加相应的文字说明。如下图：
但由于 checkbox 和 radio 比较小，操作起来不方便。就需要我们点击说明文字时也可实现 选择/勾选 对应的 checkbox/radio。这个其实只要借助 label 标签元素即可。
1，<label>标签说明
- 通过"for" 属性可把 label 绑定到另外一个元素。其中"for" 属性的值即为相关元素的 id 属性的值。
- 当点击标签文本时，浏览器就会自动将焦点转到和标签相关的表单控件上。如果绑定的是 checkbox/radio，那么点击标签文字也就同时对 checkbox/radio 生效。
2，使用样例
下面代码不管点击点击复选框，还是点击复选框旁的文字效果都是一样的。
<input id="checkbox1" type="checkbox" name="val"><label for="checkbox1">选项1</lable><br><br> <input id="checkbox2" type="checkbox" name="val"><label for="checkbox2">选项2</lable><br><br> <input id="checkbox3" type="checkbox" name="val"><label for="checkbox3">选项3</lable><br><br> <input id="checkbox4" type="checkbox" name="val"><label for="checkbox4">选项4</lable><br><br>
全部评论（0）