複数のブートストラップbuttongroupsを1つのページで使用する

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"、 "名前"、 "クラス"をそれぞれのbuttongroupとボタンに追加しました。しかし、残念ながら成功しません。お互いに影響を与えずに、ページ上に複数のbuttongroupを持つことはできますか？

公式のブートストラップページのすべての例も同様です。 o buttongroupをクリックすると、他のbuttongroupの選択が解除されます。 Bootstrap Button Group

ありがとうございました。

Answer 1

あなたのできることは次のとおりです。

Checkbox/Radio

、それぞれのスタイルでトグル有効にする.btn基含有のチェックボックスやラジオの入力にデータトグル=「ボタン」を追加します。

$('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>