单选与多选与label

Posted 2021-03-23 pengdt

单选radio和多选checkbox是用name属性关联的

相同的name就相当于同一道题

<input type="radio" name="radio">
<input type="radio" name="radio">
<hr>
<input type="checkbox" name="checkbox">
<input type="checkbox" name="checkbox">

独立的单选多选只有点击页面上的那个点才能选中
想要实现点击这个选项对应的文字也能选中需要用到<label>标签

label标签有两种写法
一种是无需父子关系的id与for绑定

<input type="checkbox" id="aa" name="xx"/>      
<lable for="aa">点我也能选中</lable>

一种是父子关系无需id和for

<lable>
<input type="checkbox" name="xx"/>点我也能选中
</lable>

要注意的是label里只能出现一个input表单元素，输入框也一样，如果有两个，会点不到

还有就是单选和多选的大小调整需要同时修改宽width和高height，只改一个是没作用的，但是改大小的样式依旧很丑，建议自定义单选多选样式，如何自定义，查看css笔记的css常用代码