全js自定义单选框

<div class="custom-radio">
  <input type="radio" id="option1" name="options" checked>
  <label for="option1">选项 1</label>
</div>
<div class="custom-radio">
  <input type="radio" id="option2" name="options">
  <label for="option2">选项 2</label>
</div>

.custom-radio input {
  display: none;
}
.custom-radio label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.custom-radio label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.custom-radio input:checked + label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #007bff;
  border-radius: 50%;
}

const radios = document.querySelectorAll('.custom-radio input');
radios.forEach(radio => {
  radio.addEventListener('change', () => {
    radios.forEach(r => r.checked = false);
    radio.checked = true;
  });
});