Bootstrap 3 - multiple active buttons in same btn-group

Question

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

Answer 1

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