js button只能选一个

可以通过以下代码实现控制按钮只能选取一个：

HTML 代码：

<button class="btn" id="btn1">按钮1</button>
<button class="btn" id="btn2">按钮2</button>
<button class="btn" id="btn3">按钮3</button>

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` 类名）。这样就能保证每次只会有一个按钮处于活跃状态。

相关问题

vue3 button只能选一个

可以通过以下代码实现控制 Vue3 中的按钮只能选取一个：

HTML 代码：

<template>
  <div>
    <button class="btn" :class="{active: activeIndex === 0}" @click="setActive(0)">按钮1</button>
    <button class="btn" :class="{active: activeIndex === 1}" @click="setActive(1)">按钮2</button>
    <button class="btn" :class="{active: activeIndex === 2}" @click="setActive(2)">按钮3</button>
  </div>
</template>

JavaScript 代码：

<script>
import { ref } from 'vue';

export default {
  setup() {
    const activeIndex = ref(0);

    const setActive = (index) => {
      activeIndex.value = index;
    };

    return {
      activeIndex,
      setActive,
    };
  },
};
</script>

<style>
.active {
  background-color: #f00;
}
</style>

上述代码中，我们首先使用 `ref` 函数创建一个响应式变量 `activeIndex`，表示当前选中按钮的索引。然后我们在模板中使用 `:class` 绑定样式类，根据 `activeIndex` 的值来判断当前按钮是否处于活跃状态，如果是则添加 `active` 类名。

在每个按钮的点击事件处理函数中，我们更新 `activeIndex` 的值，将其设置为当前按钮的索引，这样就能保证每次只会有一个按钮处于活跃状态。

el-checkbox-button 限制勾选个数

`el-checkbox-button`是Element UI库中的一个组件，它通常用于单选或多选的复选框。如果你想在一个`el-checkbox-group`中限制用户能够勾选的复选框数量，你可以利用其提供的API属性和方法来实现。

首先，在Vue模板中，设置`el-checkbox-group`的`max`属性，它接收一个数字，表示允许的最大勾选数量：

<el-checkbox-group v-model="checkedCities" max="5">
  <el-checkbox-button v-for="city in cities" :label="city.id">{{ city.name }}</el-checkbox-button>
</el-checkbox-group>

在这个例子中，`checkedCities`是一个数组存储用户的勾选项，`cities`是你需要展示的选项列表。`max=5`意味着最多只能选择5个城市。

然后，在你的数据对象里，可以设置默认值，并在钩子函数如`beforeUpdate`中检查当前选择的数量是否超过最大值，如果超限，则清除多余的勾选：

data() {
  return {
    checkedCities: [], // 默认为空
    cities: ...,
    maxSelected: 5
  }
},
methods: {
  beforeUpdate() {
    if (this.checkedCities.length > this.maxSelected) {
      this.checkedCities = this.checkedCities.slice(0, this.maxSelected);
    }
  }
}

这样就实现了对`el-checkbox-button`勾选个数的限制。