This is a small javascript snippet extending the Bootstrap Button Groups to use the toggle buttons as radio buttons or checkboxes.
Have a look at jsfiddle.
Download the code from GitHub and copy the dist directory to your project.
Include the following lines of code in the <head> section of your HTML.
<script src="path/to/jquery.twbs-toggle-buttons.min.js"></script><label class="control-label">Is it true?</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="btn active" role="button">
<input type="radio" name="options" value="1" required="required">yes 1
</div>
<div class="btn active" role="button">
<input type="radio" name="options" value="2">yes 2
</div>
<div class="btn" role="button">
<input type="radio" name="options" value="0">no
</div>
</div>
<script>
$(".btn-group-toggle").twbsToggleButtons();
</script>default:
'[role="button"]'
The default selector of all buttons is [role="button"]. To avoid this special html attribute you can change the option twbsBtnSelector, for instance to a class.
<label class="control-label">Is it true?</label>
<div class="btn-group btn-group-toggle">
<div class="btn" required="required">yes</div>
<div class="btn">no</div>
</div>
<script>
$(".btn-group-toggle").twbsToggleButtons({
twbsBtnSelector: ".btn"
});
</script>default:
'btn-success'
To detect an optical difference between active and inactive toggle buttons the two options classActive and
classInactive are set to default bootstrap classes. Change the options and use other classes to make a
difference between both toggle states.
Hint: Use an array of classes to set multiple classes.
$(".btn-group-toggle").twbsToggleButtons({
classActive: "my-active-button",
classInactive: ["my-inactive-button-1", "my-inactive-button-2"]
});default:
'btn-secondary'
See classActive
To avoid problems with the order of executing click events on the twbs-toggle-buttons you can use two event types to handle events.
The click event is fired on the button.
❗ Be careful to get the right state of the button! To get the state after button toggling use event twbsToggleButtons:activate Event.
$(".btn-group-toggle").find("[role='button']").on("click", function (e)
{
console.log(e);
});This event is fired after the state of the button getting activated was changed.
$(".btn-group-toggle").find("[role='button']").on("twbsToggleButtons:activate", function (e)
{
console.log(e);
});<label class="control-label">Choose your documents!</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="btn active" role="button">
<input type="checkbox" name="options[]" value="1">Document 1
</div>
<div class="btn active" role="button">
<input type="checkbox" name="options[]" value="2">Document 2
</div>
<div class="btn" role="button">
<input type="checkbox" name="options[]" value="3">Document 3
</div>
</div>If radio buttons are used, usually exactly one button must be active.
To allow a button group without any active button, dismiss the attribute required in the input fields.
Sometimes it is useful to change the active class of single toggle button. To do so, add the tml data attribute data-twbs-toggle-buttons-class-active
with a corresponding class.
<label class="control-label">Is it true?</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="btn active" role="button">
<input type="radio" name="options" value="1" required="required">yes
</label>
<div class="btn active" role="button">
<input type="radio" name="options" value="0" data-twbs-toggle-buttons-class-active="btn-danger">no
</label>
</div>