Question

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

    <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/

谢谢

Answer 1

您需要将您的群组与<fieldset>分开，并且还需要将其包装在<form>中，最后按照您的需要更改{{1}的第二个群组的名称} name="option"或其他。

updated jsFiddle

name="optionOne"

还将<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>的{{1}}属性与输入ID匹配，并将输入移到标签之外。除for属性外，所有内容都在上面的代码中更新。

Answer 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>

单独的按钮组

2 个答案: