css - 多个按钮组 - 选择问题

Question

我有 2 个动态创建的 Bootstrap 按钮组。当我选择一个按钮时，它起作用了。但是，一旦我在 OTHER 组中选择另一个按钮，它就会取消选择原始按钮。所以基本上我只能选择一个按钮，即使它们在不同的按钮组中。知道为什么吗？按钮组 ID 是唯一的。

<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group" id="group1">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <div class="btn-group" id="group2">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
   </div>
</div>

Answer 1

这将解决您的问题。

<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group" data-toggle="buttons">
    <label for="" class="btn btn-primary">
        <input type="radio" >Apple
    </label>
    <label for="" class="btn btn-primary">
        <input type="radio" >Samsung
    </label>
    <label for="" class="btn btn-primary">
        <input type="radio">Sony
    </label>
  </div>

  <div class="btn-group" data-toggle="buttons">
     <label for="" class="btn btn-primary">
        <input type="radio" >Apple
     </label>
     <label for="" class="btn btn-primary">
        <input type="radio" >Samsung
     </label>
     <label for="" class="btn btn-primary">
        <input type="radio" >Sony
     </label>
   </div>
</div>