单独的按钮组答案

【问题标题】：Separate button group单独的按钮组
【发布时间】：2023-03-07 23:02:01
【问题描述】：

如何分隔两个单选按钮组？每一行都必须单独检查，见下面的例子：

    <div id="group1" class="btn-group" data-toggle="buttons">                            
  <label class="btn btn-primary">
    <input id="emViewMacsButton" name="options" type="radio">MAC
  </label>
  <label class="btn btn-primary">
    <input id="emViewTagsButton" name="options" type="radio">Tags
  </label>
  <label class="btn btn-primary">
    <input id="emViewSettingsButton" name="options" type="radio">Settings
  </label>
</div>

<div id="group2" class="btn-group" data-toggle="buttons">                            
  <label class="btn btn-primary">
    <input id="emViewMacsButton2" name="options" type="radio">MAC
  </label>
  <label class="btn btn-primary">
    <input id="emViewTagsButton2" name="options" type="radio">Tags
  </label>
  <label class="btn btn-primary">
    <input id="emViewSettingsButton2" name="options" type="radio">Settings
  </label>
</div>

https://jsfiddle.net/vzn6x7z6/

谢谢

【问题讨论】：

标签： html twitter-bootstrap radio-button

【解决方案1】：

您需要使用 <fieldset> 分隔您的组，还需要将其包装在 <form> 中，最后按照您的需要将第二组的名称从 name="option" 更改为 name="optionOne" 或东西。

updated jsFiddle

<form>
  <fieldset>
    <div id="group1" class="btn-group" data-toggle="buttons">                            
      <input id="emViewMacsButton" name="options" type="radio">
      <label class="btn btn-primary">MAC</label>

      <input id="emViewTagsButton" name="options" type="radio">
      <label class="btn btn-primary">Tags</label>

      <input id="emViewSettingsButton" name="options" type="radio">
      <label class="btn btn-primary">Settings</label>
    </div>
  </fieldset>
  <fieldset>
    <div id="group2" class="btn-group" data-toggle="buttons">
      <input id="emViewMacsButton2" name="options1" type="radio">
      <label class="btn btn-primary">MAC</label>

      <input id="emViewTagsButton2" name="options1" type="radio">
      <label class="btn btn-primary">Tags</label>

      <input id="emViewSettingsButton2" name="options1" type="radio">
      <label class="btn btn-primary">Settings</label>
    </div>
  </fieldset>
</form>

还将label 的for 属性与输入ID 匹配，并将输入移到标签之外。除for 属性外，以上代码中的所有内容均已更新。

【讨论】：

【解决方案2】：

将它们放在 2 个单独的字段集中而不是 div 中，它应该可以工作：

<fieldset>
   <label class="btn btn-primary">
        <input id="emViewMacsButton" name="options" type="radio">MAC
   </label>
   <label class="btn btn-primary">
      <input id="emViewTagsButton" name="options" type="radio">Tags
    </label>
    <label class="btn btn-primary">
        <input id="emViewSettingsButton" name="options" type="radio">Settings
    </label>
   </fieldset>

   <fieldset>
       <label class="btn btn-primary">
            <input id="emViewMacsButton2" name="options" type="radio">MAC
        </label>
       <label class="btn btn-primary">
          <input id="emViewTagsButton2" name="options" type="radio">Tags
       </label>
       <label class="btn btn-primary">
          <input id="emViewSettingsButton2" name="options" type="radio">Settings
        </label>
   </fieldset>

【讨论】：