当一个按钮被选中时,取消选择其他按钮的方法可以通过以下步骤实现:
以下是一个示例代码,演示如何取消选择其他按钮:
HTML代码:
<button class="selectable-button">按钮1</button>
<button class="selectable-button">按钮2</button>
<button class="selectable-button">按钮3</button>
JavaScript代码:
// 获取所有可选择的按钮
const buttons = document.querySelectorAll('.selectable-button');
// 监听按钮的点击事件
buttons.forEach(button => {
button.addEventListener('click', () => {
// 取消其他按钮的选择状态
buttons.forEach(otherButton => {
if (otherButton !== button) {
otherButton.classList.remove('selected');
}
});
// 添加或移除选择状态
button.classList.toggle('selected');
});
});
在上述示例中,我们为每个按钮添加了一个共同的class名为"selectable-button",并使用JavaScript监听按钮的点击事件。当一个按钮被点击时,遍历所有按钮,将除当前点击的按钮外的其他按钮的选择状态取消,并通过添加或移除"selected"类来改变按钮的外观。
领取专属 10元无门槛券
手把手带您无忧上云