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

 

1.实现单选

1) checked属性

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

 

  1. <form action="http://vip.biancheng/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/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属性设置第一个选项和最后一选项为默认选项。
 

 

 
 

 

                
        
        
     
          



 
更多推荐


HTML实现单选和多选