js button只能选一个
时间: 2023-07-18 17:19:12 浏览: 218
让复选框只能选择一项的方法
可以通过以下代码实现控制按钮只能选取一个:
HTML 代码:
```html
<button class="btn" id="btn1">按钮1</button>
<button class="btn" id="btn2">按钮2</button>
<button class="btn" id="btn3">按钮3</button>
```
JavaScript 代码:
```javascript
const btns = document.querySelectorAll('.btn');
btns.forEach(btn => {
btn.addEventListener('click', () => {
btns.forEach(b => {
if (b !== btn) {
b.classList.remove('active');
}
});
btn.classList.add('active');
});
});
```
上述代码中,我们首先获取所有的按钮元素,然后给每个按钮绑定一个 `click` 事件。当某个按钮被点击时,我们遍历所有的按钮元素,将除当前点击的按钮外的其他按钮全部设为非活跃状态(去掉 `active` 类名),并将当前点击的按钮设置为活跃状态(添加 `active` 类名)。这样就能保证每次只会有一个按钮处于活跃状态。
阅读全文