如何直观地对单选按钮进行分组？答案

【问题标题】：How can I group my radio buttons visually?如何直观地对单选按钮进行分组？
【发布时间】：2020-01-16 18:41:05
【问题描述】：

您好，我正在尝试制作表单，但我被阻止了，因为我不知道如何制作单选按钮组

这是我的代码：

<!-- Pose des poteaux -->

<!-- 1st group -->
<div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
    <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
    <span class="mdl-radio__label">Sur dalle - Pose à la française</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
    <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
    <span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
    <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3" >
    <span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
  </label>
</div>

<!-- 2nd group -->
  <br>
  <div>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-4">
    <input type="radio" id="option-4" class="mdl-radio__button" name="options" value="4" >
    <span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise extérieure</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-5">
    <input type="radio" id="option-5" class="mdl-radio__button" name="options" value="5" >
    <span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise intérieure</span>
  </label>
</div>

它应该有 2 组单选按钮，但仍然不起作用。

【问题讨论】：

代码的哪一部分让你说“它应该有 2 个组？”
我假设您的意思是视觉上的，而不是关于表单提交的。如果有错误，请编辑标题（但不要添加标签）。

标签： html material-design

【解决方案1】：

只需给第 2 组中的按钮起一个不同的名称

<!-- Pose des poteaux -->

<!-- 1st group -->
<div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
    <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
    <span class="mdl-radio__label">Sur dalle - Pose à la française</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
    <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
    <span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
    <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3" >
    <span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
  </label>
</div>

<!-- 2nd group -->
  <br>
  <div>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-4">
    <input type="radio" id="option-4" class="mdl-radio__button" name="options2" value="4" >
    <span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise extérieure</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-5">
    <input type="radio" id="option-5" class="mdl-radio__button" name="options2" value="5" >
    <span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise intérieure</span>
  </label>
</div>

【讨论】：