单选按钮（Radio）

原生即互相排斥的单选按钮

radio 类简单封装了 HTML 元素 <input type="radio">。它故意没有美化，是为了保持其浏览器的兼容像和用户体验。

确保关联的单选按钮有相同的值——它们的 HTML 属性 name 值相同。

Yes No

<div class="control">
  <label class="radio">
    <input type="radio" name="answer">
    Yes
  </label>
  <label class="radio">
    <input type="radio" name="answer">
    No
  </label>
</div>

您可以通过为 <input> 元素添加 HTML 属性 checked 的方式使某个单选按钮默认被选中。

Foo Bar

<div class="control">
  <label class="radio">
    <input type="radio" name="foobar">
    Foo
  </label>
  <label class="radio">
    <input type="radio" name="foobar" checked>
    Bar
  </label>
</div>

您可以通过将 <label> 和 <input> 添加 HTML 属性 disabled 的方式禁用（disable）该单选按钮。

Going Not going Maybe

<div class="control">
  <label class="radio">
    <input type="radio" name="rsvp">
    Going
  </label>
  <label class="radio">
    <input type="radio" name="rsvp">
    Not going
  </label>
  <label class="radio" disabled>
    <input type="radio" name="rsvp" disabled>
    Maybe
  </label>
</div>