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` 的值，将其设置为当前按钮的索引，这样就能保证每次只会有一个按钮处于活跃状态。

JS实现多选框并和后端交互

实现多选框的方法很简单，可以使用HTML中的<input>标签来实现。多选框需要使用type属性为checkbox，同时给每个多选框设置一个value属性作为其值，如下所示：

<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橘子

在这里，name属性为“fruit”，表示这些多选框属于同一组，用户在选择时只能选择其中的一个或多个。value属性分别为“apple”、“banana”、“orange”，表示每个多选框的值为相应的水果名称。

如果要实现与后端的交互，可以使用AJAX技术实现异步请求。当用户选择多选框时，可以通过JavaScript获取用户选择的值，然后将其通过AJAX请求发送给后端处理。后端可以根据接收到的值进行相应的处理，然后将处理结果返回给前端。前端可以通过回调函数等方式处理返回的结果。

以下是一个简单的示例代码：

// HTML代码
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橘子
<button onclick="submit()">提交</button>

// JavaScript代码
function submit() {
  var fruits = [];
  var checkboxes = document.getElementsByName('fruit');
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      fruits.push(checkboxes[i].value);
    }
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/fruit');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // 处理返回结果
      } else {
        console.error('请求出错');
      }
    }
  };
  xhr.send(JSON.stringify({ fruits: fruits }));
}

// 后端代码（使用Node.js和Express框架示例）
app.post('/api/fruit', function(req, res) {
  var fruits = req.body.fruits;
  // 根据接收到的水果值进行处理
  res.send({ message: '处理成功' });
});

在这里，我们通过JavaScript获取用户选择的多选框值，并将其通过AJAX请求发送给后端处理。后端可以根据接收到的值进行相应的处理，然后将处理结果返回给前端。前端可以通过回调函数等方式处理返回的结果。