将普通复选框更改为自定义复选框并使其行为类似于单选按钮

<div class="custom-checkbox">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">选项1</label>
</div>

.custom-checkbox input[type="checkbox"] {
  display: none; /* 隐藏原始复选框 */
}

.custom-checkbox label {
  position: relative;
  padding-left: 25px; /* 设置标签文本的左边距，以给复选框留出空间 */
  cursor: pointer;
}

.custom-checkbox label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  background-color: #fff;
}

.custom-checkbox input[type="checkbox"]:checked + label:before {
  background-color: #007bff; /* 设置选中状态下的背景颜色 */
}

.custom-checkbox label:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  display: none; /* 隐藏选中状态下的勾号 */
}

.custom-checkbox input[type="checkbox"]:checked + label:after {
  display: block; /* 显示选中状态下的勾号 */
}

var checkboxes = document.querySelectorAll('.custom-checkbox input[type="checkbox"]');

checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('click', function() {
    if (this.checked) {
      checkboxes.forEach(function(otherCheckbox) {
        if (otherCheckbox !== checkbox) {
          otherCheckbox.checked = false;
        }
      });
    }
  });
});