如何<button>使用jQuery</button>使之<button>像單選按鈕</button>

Question

我有一個表格中的按鈕列表，我實質上希望它們像單選按鈕一樣工作。 如果單擊<button> ，則.active類將從先前選擇的任何按鈕中刪除，並添加到我選擇的任何按鈕中。 只能選擇一個。

我該如何使用jQuery？

Answer 1

給每個按鈕一個普通的類。 每次用戶單擊其中的任何一個，都從所有按鈕中刪除active類，並將其添加到單擊的按鈕中：

$(document).on('click', '.radio-button', function() {
   //Remove active class from all buttons
   $('.radio-button').removeClass('active');
   //Add active class to the clicked button
   $(this).addClass('active');
});

Answer 2

嘗試這樣的事情：

var allButtons = $('table button'); // use appropriate selector

allButtons.on('click', function () {
    allButtons.removeClass('active');
    $(this).addClass('active');
});