Question

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

Working Example

Answer 2

在HTML和大多数其他设计语言中，只能单击单选按钮组中的一个按钮。如果您想要点击多个选项，则需要复选框！这是一个如何使用复选框的想法：

<body>
<div class="container">
    <p>Fruits:</p>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="apple">apple
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="pear">pear
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="orange">orange
      </label>
    </div>
</div>
</body>

如果您喜欢单选按钮外观，可以将单选按钮样式应用于复选框。

我希望我能帮到你！

Answer 3

你能不能只使用复选框，可以用图像设置样式（未图示）

<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="apple" id="apple" value="apple">apple
        </label>
        <label class="btn btn-default">
            <input type="checkbox" name="pear" id="pear" value="pear">pear
        </label>
        <label class="btn btn-default">
            <input type="checkbox" name="orange" id="orange" value="orange">orange
        </label>
    </div>
</div>

您可以在此链接中查看样式复选框作为无线电http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

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

3 个答案: