如何<button>使用jQuery</button>使之<button>像单选按钮</button>

Question

I have a list of buttons that are in a table, and I essentially want them to act like radio buttons. If <button> is clicked, the .active class gets removed from whatever button was previously selected, and gets added to whichever one I selected. Only one can be selected.

How can I do this with jQuery?

Answer 1

Give a common class to every button. Every time user clicks to any of them, remove active class from all buttons and add it to the clicked one:

$(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

Try something like this:

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

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