在一个页面中使用多个引导按钮组

Question

假设我想在我的页面上有 2 个不同的按钮组。

<div class="btn-group fruits" role="group" aria-label="fruits" id="fruits">
    <button type="button" name="fruits" class="btn btn-default">apple</button>
    <button type="button" name="fruits" class="btn btn-default">cherry</button>
    <button type="button" name="fruits" class="btn btn-default">melon</button>
</div>

<div class="btn-group vegetables" role="group" aria-label="vegetables" id="vegetables">
    <button type="button" name="vegetables" class="btn btn-default">cucumber</button>
    <button type="button" name="vegetables" class="btn btn-default">aubergine</button>
    <button type="button" name="vegetables" class="btn btn-default">pepper</button>
</div>

每当我点击一个按钮时，其他组上的选定按钮就会被取消选择。

我为每个按钮组和按钮添加了不同的“ids”、“names”、“classes”。但遗憾的是没有成功。如何在一个页面上有多个按钮组而不相互影响？

官方引导页面上的所有示例都是这样的。当您单击 o 按钮组时，其他按钮组被取消选择。 Bootstrap Button Group

感谢您的任何想法。

Answer 1

这是你可以做的。

Checkbox / Radio

将 data-toggle="buttons" 添加到包含复选框或单选输入的 .btn-group 中，以启用各自样式的切换。

$('input').on('change', function () {
  console.clear();
  console.log(this.value)
})

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
  margin: 12px 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">

      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
          <input type="radio" name="options" value="left" autocomplete="off"> Left
        </label>
        <label class="btn btn-default">
          <input type="radio" name="options" value="middle" autocomplete="off"> Middle
        </label>
        <label class="btn btn-default">
          <input type="radio" name="options" value="right" autocomplete="off"> Right
        </label>
      </div>

    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-12 text-center">

      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
          <input type="radio" name="options" value="left 2" autocomplete="off"> Left 2
        </label>
        <label class="btn btn-default">
          <input type="radio" name="options" value="middle 2" autocomplete="off"> Middle 2
        </label>
        <label class="btn btn-default">
          <input type="radio" name="options" value="right 2" autocomplete="off"> Right 2
        </label>
      </div>

    </div>
  </div>
</div>