Menu
Within a <form>, I have Bootstrap 3 button groups with radio buttons. I want to be able to have multiple buttons in the group be simultaneously active. What I mean is, in the fruit button group, someone should be able to click apples and then oranges and (1) have both stay active, (2) have the form send both values for that group.
Html so far looks like this:
<div class="container">
<br><p>Click all the fruits that you like</p>
<div class="btn-group col-xs-12" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="apple" id="apple" value="apple">apple
</label>
<label class="btn btn-default">
<input type="radio" name="pear" id="pear" value="pear">pear
</label>
<label class="btn btn-default">
<input type="radio" name="orange" id="orange" value="orange">orange
</label>
</div>
</div>
I have tried checkboxes, but I haven't gotten them to work. Figure there has to be a way...
323
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group , including each one when nesting multiple groups.
Button groups allow multiple buttons to be stacked together on a single line. This is useful when you want to place items like alignment buttons together. You can add on optional JavaScript radio and checkbox style behavior with Bootstrap Button Plugin. This class is used for a basic button group.
Add an Empty div Element Between Two Buttons to Add Space Between Them in HTML. Use the margin-right Property to Put Space Between the Buttons in HTML.
btn-group class is used to create horizontally arranged button groups. Example: html.
Bootstrap allows you to group a series of buttons together (on a single line) in a button group: Use a <div> element with class .btn-group to create a button group:
The buttons in bootstrap are used in forms, dialogs, etc. Button Groups in Bootstrap: In Bootstrap, button groups has group of buttons together on a single line. Button group is created using class .btn-group.
Button group wraps a series of buttons together into a single line (navbar} or stack in a vertical column. Many examples and simple tutorials. Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group.
Bootstrap Collapse Group form controls and text together on a single line. Input groups enable you to combine form controls and text on the same line. They are similar to button groups in the sense that, they allow you to align the elements flush against each other.
You shouldn't use radio inputs for this, these are just for single selections within a group. For your needs you need checkboxes. Give them the same name tag value if they are in the same group and everything should work fine. All checked values will be send with the submit.
You can simply make it like this:
<div class="container">
<br><p>Click all the fruits that you like</p>
<div class="btn-group col-xs-12" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="fruit" id="apple" value="apple">apple
</label>
<label class="btn btn-default">
<input type="checkbox" name="fruit" id="pear" value="pear">pear
</label>
<label class="btn btn-default">
<input type="checkbox" name="fruit" id="orange" value="orange">orange
</label>
</div>
</div>
Working Example
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
