2つの異なるボタングループを作成する方法

2つのボタングループを作成しています。 2番目のボタングループからボタンをクリックするたびに、1番目のグループの選択済みボタンが選択解除されます。私は両方のグループのボタンを1つだけ選択できます。私は各グループから1つのボタンを選択したい。これを成し遂げるためのステップバイ2つの異なるボタングループを作成する方法

<li class="col-md-12 panel-select"> 
    <div class="col-md-2">Subject</div> 
    <div class="col-md-9" id=""> 
      <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">English</button></div> 
      <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">Geography</button></div> 
      <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">History</button></div>   
     </div>    
    </li> 
    <li class="col-md-12 panel-select"> 
     <div class="col-md-2">Class</div> 
     <div class="col-md-9" id=""> 
     <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">I</button></div> 
     <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">II</button></div> 
     <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">III</button></div> 
    </div> 
</li>`

出典

2017-07-21 passionFinder

あなたはそれを明確にもらえますか？私が上から得たのは、ユーザーが英語（件名）をクリックしてクラス（I、IIまたはIII）のいずれかが自動的に選択されたときです。 –

Ridoan、ユーザーは各グループから1つのボタンを選択します。たとえば、「Subject」の英語と「Class」の「II」をクリックしたいとします。クラスIIをクリックすると、英語の選択が解除されます。ユーザーはすべてから1つのボタンを選択することができます... – passionFinder

ステップ：

ちょうど私たちが選択した名前の選択されたボタン（のためのカスタムCSSを作成
$(this).addClass("selected");
をクリックしたユーザー選択されたボタンにクラスを追加します）。
.selected { background-color: #A8A8A8; color: #FFFFFF; }
選択されたボタンの親のIDを取得します。
group = $(this).parent().attr('id');
選択されたボタンの親のすべての子要素を取得します。次に、これらをchildClassesという名前の変数に格納します。
childClasses = $("#" + group).children();
同じグループボタンで前のボタンが選択されていないか確認してください。もしあれば、それらの要素から 'selected'クラスを削除するだけです。

for(var i = 0; i < childClasses.length; i++){ if(this.textContent != childClasses[i].textContent){ $("#" + childClasses[i].id).removeClass("selected"); } }

また、私が以下に提供しましたソースコードから学ぶことができました。これがあなたに役立つことを願っています

$(document).ready(function() { 
 
    $(".btn-default").click(function() { 
 

 
    var childClasses, group; 
 

 
    // add class "selected" to a clicked button 
 
    $(this).addClass("selected"); 
 

 
    // get the parent's id of button element 
 
    group = $(this).parent().attr('id'); 
 

 
    // store all element of selected group 
 
    childClasses = $("#" + group).children(); 
 

 
    // remove previous selected button when user select a new button in the same group button 
 
    for (var i = 0; i < childClasses.length; i++) { 
 
     if (this.textContent != childClasses[i].textContent) { 
 
     $("#" + childClasses[i].id).removeClass("selected"); 
 
     } 
 
    } 
 

 
    }); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Example</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <style type="text/css"> 
 
    .selected { 
 
     background-color: #A8A8A8; 
 
     color: #FFFFFF; 
 
    } 
 
    
 
    .row { 
 
     padding: 10px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-2 col-sm-6 col-xs-4">Subject</div> 
 
     <div class="col-lg-9 col-sm-6 col-xs-8"> 
 
     <div class="btn-group" id="group1" role="group" aria-label="..."> 
 
      <button type="button" id="subject1" class="button1 btn btn-default">English</button> 
 
      <button type="button" id="subject2" class="button1 btn btn-default">Geography</button> 
 
      <button type="button" id="subject3" class="button1 btn btn-default">History</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-2 col-sm-6 col-xs-4">Class</div> 
 
     <div class="col-lg-9 col-sm-6 col-xs-8"> 
 
     <div class="btn-group" id="group2" role="group" aria-label="..."> 
 
      <button type="button" id="class1" class="button2 btn btn-default">I</button> 
 
      <button type="button" id="class2" class="button2 btn btn-default">II</button> 
 
      <button type="button" id="class3" class="button2 btn btn-default">III</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</body> 
 

 
</html>

出典

2017-07-23 17:29:53

こんにちはRidoan、私は2番目のグループからボタンをクリックすると、最初のグループの選択が削除されます...問題はまだ.. ram34 .. – passionFinder

@passionFinder ..私それを修正しました。ちょうどそれをチェックしてください。 –

ありがとうRidoan ..それはうまく動作します... – passionFinder

2つの異なるボタングループを作成する方法

答えて

関連する問題