如何实现仅单选的自定义radio buttons并简化CSS伪元素样式

一、统一设置伪元素样式 #

完全可以给所有按钮统一设置::after伪元素样式，不需要单独为每个类重复编写。只需要给所有按钮添加一个通用类（比如radio-btn），然后针对这个通用类编写伪元素样式即可，大幅减少冗余代码。

二、实现单选功能 #

当前问题出在两点：一是JS用toggle逻辑允许同时选中多个按钮；二是HTML中重复使用id="container"不符合规范（id必须唯一）。修改JS逻辑，确保每次点击时先移除所有按钮的选中状态，再给当前点击的按钮添加选中状态即可实现单选。

完整修改后的代码 #

HTML

<div class="main">
    <div class="radio-btn first"></div>
    <div class="radio-btn second"></div>
    <div class="radio-btn third"></div>
    <div class="radio-btn forth"></div>
</div>

CSS

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 20px;
}

.radio-btn {
    display: flex;
    place-content: center;
    place-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(202, 202, 202);
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 6px 1px #e8eef6;
}

/* 统一设置所有按钮的伪元素样式 */
.radio-btn::after {
    content: '';
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(78, 78, 78);
    position: absolute;
    visibility: hidden;
}

.active::after {
    visibility: visible;
}

JS

let mainBtns = document.querySelectorAll('.radio-btn');

mainBtns.forEach(btn => {   
    btn.addEventListener('click', () => {
        // 先移除所有按钮的选中状态
        mainBtns.forEach(item => item.classList.remove('active'));
        // 给当前点击的按钮添加选中状态
        btn.classList.add('active');
    });
});

关键修改点说明 #

• HTML：移除重复的id="container"，添加通用类radio-btn，既符合id唯一性规范，也方便统一选择元素。
• CSS：用.radio-btn::after替代四个单独的伪元素样式，实现代码复用；删除冗余的.deActive类（未选中状态默认就是visibility: hidden，无需额外定义）。
• JS：替换toggle逻辑为“先清空所有选中状态，再设置当前按钮为选中”，确保同一时间只有一个按钮处于选中状态。

内容的提问来源于stack exchange，提问作者Ravi