ボタングループを選択すると、他のものが選択されていない場合、どのようにボタングループを作ることができますか？Javascript

Question

私は画面上にたくさんのボタンを持っており、クリックすると背景色が赤に変わるように設定します。
複数のボタンをこのようにクリックして赤くすることができます。
一度に1つしか選択できないようにしたいと思っています
ボタンをクリックすると、赤色の唯一のボタンとなり、他のボタンは自然な色調になります。ラジオボタンのようなもの。ここで

は私のコードです：
HTML：あなたのcreateButton呼び出しでタイプの問題がある

//creating buttons for picking coins 
 
function createButton(type, className, id, value, onclickFunction) { 
 
    //comments are for the coins buttons: 
 
    var button = document.createElement("input"); // input type is the simplest 
 
    button.type = type; //"button"; 
 
    button.className = className; // 'Button'; 
 
    button.id = id; // id; 
 
    button.value = value; // id; 
 
    button.onclick = onclickFunction; // "" 
 

 
    //adding the just created coin to screen 
 
    var divCoinPickScrn = document.getElementById("arrayStatus"); 
 
    divCoinPickScrn.appendChild(button); 
 
    var space = document.createTextNode(" "); 
 
    divCoinPickScrn.appendChild(space); 
 

 

 
} 
 

 
$(document).ready(function() { 
 

 
    //creating 99 buttons with id same as their number: 
 
    for (var i = 2; i <= 100; i++) { // function createButton(type , className , id , value , onclickFunction) 
 
    createButton('button', 'button', i, i, ""); 
 
    } 
 

 
    // listener for clicking 
 
    $('.Button').click(function(e) { 
 

 
    $(this).toggleClass("active"); 
 
    e.preventDefault(); 
 
    }); 
 
});

.Button:active, 
 
.active { 
 
    background-color: red; 
 
    color: white; 
 
}

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

 
<!-- for displaying the array with every number as a BUTTON--> 
 
<div id="arrayStatus"> 
 

 
</div>

Answer 1

は大文字である.Buttonですそれは.buttonでなければなりません。

FIDDLE

コード：

//creating buttons for picking coins 
 
function createButton(type, className, id, value, onclickFunction) { 
 
    //comments are for the coins buttons: 
 
    var button = document.createElement("input"); // input type is the simplest 
 
    button.type = type; //"button"; 
 
    button.className = className; // 'Button'; 
 
    button.id = id; // id; 
 
    button.value = value; // id; 
 
    button.onclick = onclickFunction; // "" 
 

 
    //adding the just created coin to screen 
 
    var divCoinPickScrn = document.getElementById("arrayStatus"); 
 
    divCoinPickScrn.appendChild(button); 
 
    var space = document.createTextNode(" "); 
 
    divCoinPickScrn.appendChild(space); 
 

 

 
} 
 

 
$(document).ready(function() { 
 

 
    //creating 99 buttons with id same as their number: 
 
    for (var i = 2; i <= 100; i++) { // function createButton(type , className , id , value , onclickFunction) 
 
    createButton('button', 'button', i, i, ""); 
 
    } 
 

 
    // listener for clicking 
 
    $('.button').click(function(e) { 
 
    $('.button').removeClass("active"); 
 
    $(this).toggleClass("active"); 
 
    e.preventDefault(); 
 
    }); 
 
});

.button:active, 
 
.active { 
 
    background-color: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="arrayStatus"> 
 

 
</div>

Answer 2

まず、あなたが適切なクラスに

createButton('button' , 'Button' , i , i , ""); 

を設定してはいけません

（第2パラメータの上位B）

その後、単に1トリック

$('.Button').click(function(e) { 
    $('.Button').removeClass("active"); 
    $(this).toggleClass("active"); 
    e.preventDefault(); 
}); 

ワーキングサンプル行う必要がありますクリックに追加する前に、すべてのボタンからアクティブなクラスを削除します。それが唯一の問題を取り組んでいるhttps://jsfiddle.net/6yhg8qv7/