ボタングループを半分に分割する

Question

同じグループを維持しながら別のグループに分けたいのですが、btn-groupです。現在のところ、最初はグループが期待どおりに表示されますが、もう一方のボタン（[除外]）からボタンを選択すると、選択を解除できません.2つの半分は2つのグループとして動作しているようです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-9 btn-toolbar" role="toolbar"> 
 
    <div class="btn-group" data-toggle="buttons" role="group"> 
 
     <label class="btn btn-warning"> 
 
      <input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off"> Exclude 
 
     </label> 
 
    </div> 
 
    <div class="btn-group" data-toggle="buttons" role="group"> 
 
     <label class="btn btn-default"> 
 
      <input type="radio" class="reason" name="reason" id="war" value="War" autocomplete="off"> War 
 
     </label> 
 
     <label class="btn btn-default"> 
 
      <input type="radio" class="reason" name="reason" id="peace" value="Peace" autocomplete="off"> Peace 
 
     </label> 
 
     <label class="btn btn-default active"> 
 
      <input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked> Both 
 
     </label> 
 
     <label class="btn btn-default"> 
 
      <input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off"> Total 
 
     </label> 
 
    </div> 
 
</div>

JSFiddle

Answer 1

ここでの問題は、ブートストラップは、アクティブクラスに基づいて、ボタンにスタイルを適用するということですこれはJavascriptを介してラベルに適用されます。ラジオボタンは実際に選択され、正しく選択されていないので、スタイリングによって隠されています。

HTML & CSSを使用した：ここで

は、この問題を回避作業の二つの方法だ

カスタム・グループのidを持つ単一のボタン・グループにボタンを組み合わせると、次のCSSを追加します。

#custom-group label:first-child { 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    margin-right: 10px; 
} 

#custom-group label:nth-of-type(2) { 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 

kabanusの回答と同様に、これは1つのボタングループを2つのように見せます。

var labels = document.querySelectorAll('label'); 

labels.forEach(function(label) { 
    label.addEventListener('click',function() { 
     labels.forEach(function(l) { 
     l.classList.remove('active'); 
    }); 
    label.classList.add('active'); 
    }); 
}) 

これは「手動」のすべてのボタンからアクティブなクラスを削除し、ちょうど1に追加します：

があるとしてHTMLをままにして、次のJavaScriptを追加Javascriptをを使用して

あなたはちょうどクリックした。ラベルのセレクタを調整して、ページの他のコードに影響を与えないようにしてください。ここで

はフィドルです：https://jsfiddle.net/22et5z3h/4/

Answer 2

私はあなたがそのようなdiv Sを分離することができないと思います。私は、最も簡単な解決策は、単に「特別」ボタンを余裕のビットを追加することであると思う：

<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
    
 
<div class="col-md-9 btn-toolbar" role="toolbar"> 
 
    <div class="btn-group" data-toggle="buttons" role="group"> 
 
      <label class="btn btn-warning" style="margin-right: 10pt;"> 
 
       <input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off"> 
 
       Exclude 
 
      </label>  
 
      <label class="btn btn-default"> 
 
       <input type="radio" class="reason" name="reason" id="used" value="War" autocomplete="off"> 
 
       War 
 
      </label> 
 
      <label class="btn btn-default"> 
 
       <input type="radio" class="reason" name="reason" id="off" value="Peace" autocomplete="off"> 
 
       Peace 
 
      </label> 
 
      <label class="btn btn-default active"> 
 
       <input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked> 
 
       Both 
 
      </label> 
 
      <label class="btn btn-default"> 
 
       <input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off" > 
 
       Total 
 
      </label> 
 
     </div> 
 
</div>