单选多元素互斥选择的实现方法

在网页设计与开发过程中，单选多元素互斥选择是一个常见需求。例如在问卷调查的选项选取、商品规格选择等场景中，用户只能从多个元素里选择一个。下面为大家详细介绍其实现方法。

利用 HTML 的原生单选框（radio）是最直接的方式。在 HTML 代码中，将具有相同 name 属性的多个单选框组合在一起，浏览器会自动实现它们之间的互斥效果。例如：

<input type="radio" name="fruit" value="apple"> 苹果
<input type="radio" name="fruit" value="banana"> 香蕉
<input type="radio" name="fruit" value="cherry"> 樱桃

这样，用户在这一组单选框中只能选择一个选项。

使用 CSS 和 JavaScript 也能实现自定义样式的单选多元素互斥选择。用 HTML 创建多个按钮或其他元素作为可选项目。例如：

<button class="option">选项一</button>
<button class="option">选项二</button>
<button class="option">选项三</button>

然后，通过 CSS 为这些元素添加初始样式。接下来，利用 JavaScript 实现互斥逻辑。通过为每个元素添加点击事件监听器，当某个元素被点击时，先移除所有元素的选中状态（例如移除特定的 CSS 类），再为当前点击的元素添加选中状态。示例代码如下：

const options = document.querySelectorAll('.option');
options.forEach(option => {
    option.addEventListener('click', function() {
        options.forEach(opt => opt.classList.remove('selected'));
        this.classList.add('selected');
    });
});

在框架中，如 React、Vue 等，实现方式也各有特点。以 React 为例，可以通过管理组件的状态来实现互斥选择。定义一个状态变量存储当前选中的值，然后在每个选项的点击事件处理函数中更新该状态。

import React, { useState } from'react';

const RadioGroup = () => {
    const [selectedValue, setSelectedValue] = useState(null);

    const handleClick = (value) => {
        setSelectedValue(value);
    };

    return (
        <div>
            <button onClick={() => handleClick('value1')}>值一</button>
            <button onClick={() => handleClick('value2')}>值二</button>
            <button onClick={() => handleClick('value3')}>值三</button>
        </div>
    );
};

export default RadioGroup;

实现单选多元素互斥选择有多种方式，开发者可以根据项目的具体需求和技术栈来选择合适的方法，以提供良好的用户交互体验。