MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<input type="radio">

<input> 的 radio 类型元素默认渲染为小型圆圈图表,填充即为激活,类似于之前描述额复选框(checkbox)类型。单选按钮允许你选择单一的值来提交表单。

<input id="radioButton" type="radio">

注:复选框类似于单选按钮,但是有个重要的区别 -- 单选按钮为选择其中一项而设计,然而复选框允许你开启或关闭单个值。每个独立的单选按钮大致上是 Boolean 控件 --  是或不是。

Value A DOMString representing the value of the radio button.
事件 change 和 {event("input")}}
支持的公共属性 checked
IDL 属性 checked and value
方法 select()

A DOMString 表示单选按钮的值。它永远不会在客户端看到,但是在服务器上,这就是使用单选按钮 name 提交的数据的 value。查看以下示例:

<form>
Please specify your gender:
<br>
  <div>
    <input type="radio" id="genderChoice1" name="gender" value="male">
    <label for="genderChoice1">Male</label>

    <input type="radio" id="genderChoice2" name="gender" value="female">
    <label for="genderChoice2">Female</label>

    <input type="radio" id="genderChoice3" name="gender" value="other">
    <label for="genderChoice3">Other</label>

    <input type="radio" id="genderChoice4" name="gender" value="notSpecified">
    <label for="genderChoice4">Prefer not to specify</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

这个示例中,我们拥有四个单独的单选框类型的输入对象,表示一个通常的性别选择表单。第一个单选按钮的 ID 为 "genderChoice1",名称为 "gender",值为 "male"。如果表单提交的时候选中了第一个值,名/值对的数据就是 gender=male

"name" 对于单选按钮来说,是非常重要的属性,因为它表示了它属于哪个组。因为一组单选按钮表现为一个整体,你必须为所有相关的单选按钮指定一个共同的名称。当两个或更多单选按钮名称相同时,选择按钮之一会取消名称相同的其它按钮的选择。如果你在一个页面上,拥有超过一组单选按钮,不同组中的按钮必须拥有不同的名称属性。

规范

Specification Status
WHATWG HTML Living Standard
<input type="radio">
Living Standard  
HTML5
<input type="radio">
Recommendation  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)

另见

文档标签和贡献者

 此页面的贡献者: wizardforcel
 最后编辑者: wizardforcel,