Twitter Bootstrap Button Group Control Radio Buttons/Checkboxes

Bootstrap 3 has a "native" solution...

There now is a "true" Bootstrap solution for this problem, which appears to work fine also on older browsers. Here's what it looks like:

// get selection
$('.colors input[type=radio]').on('change', function() {
    console.log(this.value);
});

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="btn-group colors" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
  </label>
</div>

<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

See the relevant Bootstrap documentation for more information.

Bootstrap 4

Bootstrap 4 supports component the same way as Bootstrap 3, but Bootstrap 4 does not support IE9. You might want to check out the Bootstrap IE8 project.

Bootstrap 2

Try this fiddle

HTML:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>

Script:

$(".btn-group button").click(function () {
    $("#buttonvalue").val($(this).text());
});

then get buttonvalue server side

With Bootstrap 3.2 put the hidden input in the middle of your button group container. Instead of the text content we take the value of th data-value field.

<div id="test" class="btn-group checkit" data-toggle="buttons-radio">
    <button type="button" data-value="1" class="btn btn-default active">Yes</button>
    <input type='hidden' name="testfield" value='1'>
    <button type="button" data-value="0" class="btn btn-default ">No</button>
</div>

Now insert a little javascript snippet into the onload part of your template.

$('.checkit .btn').click(function() {
    $(this).parent().find('input').val($(this).data("value"));
});

So you only need to add .checkit to your button group and insert a hidden input field.

With bootstrap 3.2 you can use button groups directly with radio- or checkbox-inputs

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="options" id="option1" value="1" /> Yes
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option2" value="0" /> No
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option3" value="42" /> Whatever
    </label>
</div>

See here: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

You can use hidden form elements and javascript to use the button state to trigger the form element states.

CSS-only solution:

HTML:

<div class="btn-group">
    <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label>
    <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label>
</div>

SCSS/LESS:

 label.btn {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;

    span {
      display: block;
      padding: 10px 15px;
    }

    input[type=checkbox] {
      display: none;
    }

    input:checked + span {
      display: block;
      color: #fff;
      background-color: #285e8e;
    }
  }

JSfiddle here

Twitter Bootstrap Button Group Control Radio Buttons/Checkboxes

Related

Recent Posts