使用普通按钮(非单选/复选框)，如何确保只选择一个值，如果选择了一个值则取消选择另一个值

Question

这是一个非常精简的版本，可以直观地显示我想做的事情。

我的HTML

<p class="call">Please select a number.</p>
<div class="button-flex">
<button class="rating">1</button>
<button class="rating">2</button>
<button class="rating">3</button>
<button class="rating">4</button>
<button class="rating">5</button>
</div>

我的JS

let allBtns = document.querySelectorAll(".rating");
allBtns.forEach((option) => {
option.addEventListener("click", function () {
option.style.backgroundColor = "orange";
});
});

本质上，我希望用户只能点击一个评级(1到5(，该评级最终将用于更新字符串。

我现在想解决的主要问题是能够选择一个值，选择另一个值并取消选择以前选择的值。我找到了一种使用单选框的方法，复选框也可以，但我也想保持按钮的样式，因为它应该是这样显示的。

这在普通按钮元件中可能吗？

Answer 1

let allBtns = document.querySelectorAll(".rating");
allBtns.forEach((option) => {
option.addEventListener("click", function (event) {
allBtns.forEach(el => {
el.classList.remove('active');
});

event.currentTarget.classList.add('active');
});
});

.rating.active {
background-color: orange;
}

<p class="call">Please select a number.</p>
<div class="button-flex">
<button role="radio" class="rating">1</button>
<button role="radio" class="rating">2</button>
<button role="radio" class="rating">3</button>
<button role="radio" class="rating">4</button>
<button role="radio" class="rating">5</button>
</div>

用.active 标识当前选择的按钮元素

选择按钮后，从所有按钮元素中删除.active，并将.active插入新选择的按钮中。

Answer 2

您应该记住最后一个按钮，然后在下次单击时将其更改回，如下所示：

let allBtns = document.querySelectorAll(".rating");
let lastBtn;
allBtns.forEach((option) => {
option.addEventListener("click", function () {
lastBtn && (lastBtn.style.backgroundColor = null);
(lastBtn = option).style.backgroundColor = "orange";
});
});

<p class="call">Please select a number.</p>
<div class="button-flex">
<button class="rating">1</button>
<button class="rating">2</button>
<button class="rating">3</button>
<button class="rating">4</button>
<button class="rating">5</button>
</div>