CODEWITHSUNDEEP
htmltwitter-bootstrapradio-button
Guilhem
Guilhem

Reputation: 3

Separate button group

How do I separate two radio button groups ? Each line have to be checked separately, see in the example below : 

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

Thanks

Upvotes: 0

Views: 1348

Answers (2)

Zlatko Vujicic
Zlatko Vujicic

Reputation: 353

You need to separate your groups with <fieldset> , and also you need to wrap it in <form>, and finally to work as you want you need to change name for second group from name="option" to name="optionOne" or something.

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>

Also match for attribute of label with input ID, and move input outside of label. Everything is updated in code above except for attributes.

Upvotes: 1

Lexi
Lexi

Reputation: 324

Put them in 2 separate fieldsets instead of a div and it should work:

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

Upvotes: 0

Related Questions