页面单选框<input type="radio">的分组与优化

我们在做页面的开发时，可能会遇到将单选框分组的问题。比如，你可能需要在这个页面上既需要做一个性别的单选框，还需要做一个职业的单选框。就是下面这种效果，性别：

点击试试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>

效果：

点击试试1 点击试试2