HTML实现单选和多选

在 HTML 中，把 <input> 标签的 type 属性设置为 radio 可以表示单选按钮。

 

1.实现单选

1) checked属性

checked 属性用来设置页面加载时单选按钮的选中状态。当属性值为“checked”时，单选按钮会被选中。

1. <form action="http://vip.biancheng.net/login.php" method="post" name="formName">
2. 性别：<input type="radio" name="girl" checked="checked">女
3. <input type="radio" name="boy" checked="checked">男
4. </form>

运行结果如图所示：

2) name属性

上述代码因为 name 属性值不同，两个单选按钮被同时选中。接下来我们就来看一下当 name 属性值相同时，给两个按钮都设置选中，会产生什么效果：

1. <form action="http://vip.biancheng.net/login.php" method="post" name="formName">
2. 性别：<input type="radio" name="sex" checked>女
3. <input type="radio" name="sex" checked>男
4. </form>

运行结果如图所示：

通过运行结果可以发现，后面的按钮被选中，而前面的按钮没有。这是因为当 name 属性值相同而且 type 属性为 radio 时，浏览器会认为是相同字段，默认只能选择一个。然而又因为我们为两个按钮同时设置了选中效果，根据代码的执行顺序后者会覆盖前者。

 

2.实现多选

1) 将input标签的type属性值设置为checkbox，即设置input为多选项类型。

 2）再使用checked属性设置第一个选项和最后一选项为默认选项。