HTML使用按鈕作爲'單選按鈕'，並在按下時應用不同的狀態

Question

所以即時尋找一種解決方案，使用一些按鈕作爲表單中的'單選按鈕'，想象你點擊（一次只能按下一個按鈕）一個按鈕下面的按鈕，它會得到一個新的css標籤，也許背景顏色或其他東西，所以你知道你已經點擊了它，並且也在選定的表單中被標記。

基本上我有一個頁面由大量的下面，其實質上是一種形式，但我需要使用按鈕作爲'多項選擇'，並設置一個狀態，當你點擊一個按鈕時激活，並始終保持這一頁。

開放給JavaScript作爲明顯，我認爲，多數民衆贊成什麼病需要。

Answer 1

你可以用jQuery控制選擇效果嗎？也許你可以圍繞這樣的按鈕包圍div：

<div class="button-div"> 
    <a class="btn-1">Learn More</a> 
    <a class="btn-2">I want this</a> 
    <a class="btn-3">No thanks</a> 
</div> 

然後有一個像這樣的onclick函數？

$('.button-div a').on('click', function(){ 
    var getButton = $(this).attr('class'); 
    $('.button-div a').removeClass('active'); 
    $('.button-div a.' + getButton).addClass('active'); 
} 

然後，只需對活動類

.button-div .active { 
    background: red; 
} 

只有粗糙的風格，但希望幫助？

Answer 2

只能與html和css做：

.input-radio{ 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    margin-top: 30px; 
 
} 
 
input[type=radio] { 
 
    display: none; 
 
    } 
 
    input[type=radio] + label { 
 
    padding: 20px; 
 
    border-radius: 40px; 
 
    border: 1px solid #ddd; 
 
    
 
    } 
 
input[type=radio] + label:hover { 
 
    border: 1px solid red; 
 
    } 
 
    input[type=radio]:checked + label { 
 
    border: 1px solid red; 
 
    }

<div class="input-radio"><input type="radio" id="male" name="gender" value="male" checked> <label for="male">male</label></div> 
 
<div class="input-radio"><input type="radio" id="female" name="gender" value="female"> <label for="female">Icecrea</label></div> 
 
<div class="input-radio"><input type="radio" name="gender" id="other" value="other"> <label for="other">Vanilla</label></div>