單獨按鈕組

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>中，最後按照您的需要工作需要將第二組的名稱從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> 

同時匹配具有輸入ID的labelfor屬性，並移動輸入標籤的外部。除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>