如何在第二次单击时取消选中自定义单选按钮？

<input type="radio" id="custom-radio" onclick="toggleCustomRadio()">

<script>
function toggleCustomRadio() {
  var radio = document.getElementById("custom-radio");
  if (radio.checked) {
    radio.checked = false;
  }
}
</script>

<input type="checkbox" id="custom-radio">
<label for="custom-radio"></label>

<style>
input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

input[type="checkbox"]:checked + label {
  background-color: #f00;
}
</style>