大家好！今天来聊聊如何把复选框（checkbox）转换成单选按钮（radio button）的样子，但仍然保留复选框的功能哦！这在某些特定场景下非常有用，比如需要用户选择一个选项，但是又希望界面看起来更统一。

首先，我们需要明白复选框和单选按钮的区别：

- 复选框：允许用户选择多个选项。

- 单选按钮：同一组内只能选择一个选项。

那么，如何让复选框看起来像单选按钮呢？这里有一个简单的方法：

1. CSS魔法：通过CSS样式调整复选框的外观。可以隐藏原生的复选框，并用伪元素（如:before或:after）创建一个自定义的圆圈或方块。

```css

input[type="checkbox"] {

display: none;

}

input[type="checkbox"] + label::before {

content: '';

display: inline-block;

width: 20px;

height: 20px;

margin-right: 8px;

border: 2px solid ccc;

border-radius: 50%;

}

input[type="checkbox"]:checked + label::before {

background-color: 007bff;

border-color: 007bff;

}

```

2. HTML结构：确保每个复选框都有一个对应的标签（label），这样点击标签时也能触发复选框的状态改变。

```html

选项一

```

3. JavaScript限制：使用JavaScript来确保在同一组内只能选择一个复选框。可以通过监听复选框的状态变化，并取消其他复选框的选择来实现。

```javascript

document.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {

checkbox.addEventListener('change', () => {

if (checkbox.checked) {

document.querySelectorAll('input[type="checkbox"]').forEach((otherCheckbox) => {

if (otherCheckbox !== checkbox) {

otherCheckbox.checked = false;

}

});

}

});

});

```

这样一来，我们就实现了复选框的单选效果！希望这个方法能帮助到有需要的小伙伴们。如果还有疑问，欢迎留言讨论哦！👍

前端开发 CSS技巧 JavaScript