Bootstrap 3 - 同一btn-group中的多个活动按钮

Question

在a中<form>,我有带有单选按钮的Bootstrap 3按钮组.我希望能够让组中的多个按钮同时处于活动状态.我的意思是,在水果按钮组中,某人应该能够点击苹果然后点击橙子,并且(1)两者都保持活动状态,(2)让表单发送该组的两个值.

到目前为止,Html看起来像这样:

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

我试过复选框,但我还没有让它们工作.图必须有一种方法......

Answer 1

您不应该radio为此使用输入,这些仅用于组内的单个选择.满足您的需求checkboxes.name如果它们在同一组中,则为它们提供相同的标记值,并且一切都应该正常工作.所有选中的值都将与提交一起发送.

你可以简单地做到这样:

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

工作实例