radio 如何 分组?

<input> 类型的元素 radio默认呈现为在激活时选择的小圆形图标。单选按钮允许您从表单中提交的多个设置选项中选择一个值。 它们被称为单选按钮，因为它们的外观和操作方式类似于旧式收音机上的按钮

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

下面我们看一个例子：

     <form>
    Please specify your gender:
    <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>

U[R}9GGXP%{_KI%YK]BWJPA.png

在这个例子中，我们有四个单独的无线电input对象，代表一个典型的性别选择形式。第一个单选按钮具有id的genderChoice1，的名称gender，和的值male。如果在提交表单时选择了第一个值，则数据名称/值对将是gender=male。

如果value属性被省略，则提交的数据将被赋予默认值on，因此在这种情况下提交的数据将是gender=on。这没有什么意义，所以记住设置你的value属性！

在这个例子中，我们有四个单独的无线电input对象，代表一个典型的性别选择形式。第一个单选按钮具有id的genderChoice1，的名称gender，和的值male。如果在提交表单时选择了第一个值，则数据名称/值对将是gender=male。 如果value属性被省略，则提交的数据将被赋予默认值on，因此在这种情况下提交的数据将是gender=on。这没有什么意义，所以记住设置你的value属性！

默认选择单选按钮
要使默认选择单选按钮，您只需给它一个checked属性。见下面的例子：

 <form> Please specify your gender:
   <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" checked>
  <label for="genderChoice4">Prefer not to specify</label>
</div>
<div>
  <button type="submit">Submit</button>
</div>
</form>

1.png