我们在做页面的开发时,可能会遇到将单选框分组的问题。比如,你可能需要在这个页面上既需要做一个性别的单选框,还需要做一个职业的单选框。就是下面这种效果,性别:
点击试试1 点击试试2那当你想在页面上在定义一组类似的单选框,用来让用户点击来选择职业的话,那应该怎么让上面性别的单选框与其区分开来(也就是分组)呢?其实很简单,我们只要给不同组的单选框起不同的名字就可以了,也就是说,input标签的name属性值相同的是一组,不同的是不同组。
下面是一个例子:
<!-- 第一组 -->
<input id="r1" type="radio" value="0" name="gender">男</input>
<input id="r2" type="radio" value="1" name="gender">女</input>
<!-- 第二组 -->
<input id="r3" type="radio" value="0" name="job">律师</input>
<input id="r4" type="radio" value="1" name="job">教师</input>
这是具体的效果:
第一组
男
女
第二组
律师
教师
我们单独使用单选框时,会有一个影响用户体验的地方,那就是当显示器的分辨率过高,或者浏览器的缩放比例过低时,单选框就会变得难以选中。这时我们就可以将单选框与lable标签绑定起来,这也很简单,我们只需要定义好lable标签,然后将lable标签的for属性的值设置为input标签的id属性的值就可以了。这样设置后,我们可以通过点击lable标签来选中单选框,也就是当你点击下面的点击试试1或2文字的时候也可以选中单选框,这是跟上面的单选框不同的地方。不妨点击试试吧。
例子:
<label for="r5"><input id="r5" type="radio" value="0" name="chose">点击试试1</label>
<label for="r6"><input id="r6" type="radio" value="1" name="chose">点击试试2</label>
效果: