如何解决Radio选中和不选中样式的问题？

背景

Radio按钮是web开发者常用的组件之一，通常用来让用户在几个互斥选项中进行选择。Radio按钮具有两种状态：被选中和未选中。然而，有时候我们需要修改Radio按钮的默认样式来更好地满足设计需求，这就涉及到了Radio选中和不选中样式的问题。

解决方案

下面介绍几种可行的解决方案，供开发者参考：

方案一：使用CSS样式处理

对于Radio按钮的选中和不选中状态，我们可以使用CSS样式来实现自定义样式。具体操作如下：

1. 为Radio按钮添加class类别属性。
2. 编写CSS样式，分别对应选中和不选中状态。例如：

.radio {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
}
.radio-input:checked + .radio-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0078d7;
}
.radio-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #888888;
}
.radio-input:checked + .radio-label::before {
  border: 2px solid #0078d7;
}

代码中，我们定义了包含Radio按钮的

const radioList = document.querySelectorAll('.radio');
radioList.forEach(radio => {
  radio.addEventListener('change', () => {
    radioList.forEach(r => {
      r.classList.remove('selected');
    });
    radio.classList.add('selected');
  });
});