如何创建混合实现的不确定复选框？

<div class="checkbox-container">
  <input type="checkbox" id="uncertain-checkbox" class="uncertain-checkbox">
  <label for="uncertain-checkbox">不确定状态</label>
</div>

.uncertain-checkbox {
  /* 基础样式 */
}

.uncertain-checkbox.indeterminate::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-right: 5px;
}

document.getElementById('uncertain-checkbox').addEventListener('change', function() {
  if (this.indeterminate) {
    this.indeterminate = false;
    this.checked = true;
  } else {
    this.checked = false;
    this.indeterminate = true;
  }
});

// 设置不确定状态
function setIndeterminate(checkbox, indeterminate) {
  checkbox.indeterminate = indeterminate;
}