如何实现带有Indeterminate状态的自定义Checkbox？

我懂你现在的困扰——明明用JS设置了复选框的indeterminate属性，但因为是自定义样式的复选框，完全看不到效果对吧？咱们一步步把这个问题搞定：

问题核心原因 #

你已经通过JS正确触发了父复选框的不确定状态，但你的自定义样式是靠<span class="checkmark">来渲染的，浏览器原生的不确定状态样式被你自己写的CSS覆盖了，所以得把这个状态同步到自定义的标记元素上才行。

具体修复步骤 #

1. 调整JS逻辑，同步状态类 #

在设置checkall.indeterminate的同时，给父复选框对应的checkmark元素添加/移除indeterminate类，这样CSS就能识别这个状态了：

修改你的JS代码中处理子复选框点击的部分：

$(document).ready(function() { 
  var checkboxes = document.querySelectorAll('input.subOption'), 
      checkall = document.getElementById('option'); 

  for (var i = 0; i < checkboxes.length; i++) { 
    checkboxes[i].onclick = function() { 
      var checkedCount = document.querySelectorAll('input.subOption:checked').length; 
      checkall.checked = checkedCount > 0; 
      var isIndeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
      checkall.indeterminate = isIndeterminate;
      // 把不确定状态同步到自定义的checkmark上
      checkall.nextElementSibling.classList.toggle('indeterminate', isIndeterminate);
    } 
  } 

  checkall.onclick = function() { 
    for (var i = 0; i < checkboxes.length; i++) { 
      checkboxes[i].checked = this.checked; 
    }
    // 点击父复选框时，清除不确定状态的类
    this.indeterminate = false;
    this.nextElementSibling.classList.remove('indeterminate');
  } 
});

2. 修改CSS样式，适配不确定状态 #

你原来的.intermediate类选择器和样式需要调整，让它能正确匹配带状态类的checkmark，并且优化显示效果：

/* 修正后的不确定状态样式 */
.container-check .checkmark.indeterminate:after {
  content: "";
  position: absolute;
  display: block;
  left: 3px;
  top: 6px;
  width: 10px;
  height: 2px;
  background-color: white;
  border: none;
  transform: none;
}

/* 确保选中状态和不确定状态不冲突 */
.container-check input:checked ~ .checkmark.indeterminate:after {
  display: block;
}

3. 验证HTML结构（可选） #

你的HTML里父复选框的label已经通过for="option"和input正确关联了，这部分没问题，保持原样即可。

完整可运行代码示例 #

整合后的代码直接就能测试效果：

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-list">
  <ul>
    <li>
      <label class="container-check" for="option">
        <input id="option" type="checkbox">
        <span class="checkmark"></span> Checkbox Selected
      </label>
      <ul>
        <li>
          <label class="container-check">
            <input class="subOption" type="checkbox">
            <span class="checkmark"></span> Checkbox label 01
          </label>
        </li>
        <li>
          <label class="container-check">
            <input class="subOption" type="checkbox">
            <span class="checkmark"></span> Checkbox label 02
          </label>
        </li>
        <li>
          <label class="container-check">
            <input class="subOption" type="checkbox">
            <span class="checkmark"></span> Checkbox label 03
          </label>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS #

/* Customize the label (the container) */
.container-check {
  position: relative;
  padding-left: 25px;
  margin-bottom: 11px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: normal;
}

.container-list ul {
  list-style: none;
  margin-left: -14px;
}

/* Hide the browser's default checkbox */
.container-check input {
  position: absolute;
  opacity: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: solid 1px #626579;
  border-radius: 4px;
}

/* On mouse-over, add a grey background color */
.container-check:hover input~.checkmark {
  background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.container-check input:checked~.checkmark {
  background-color: #25a5bd;
  border: solid 1px #25a5bd;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-check input:checked~.checkmark:after {
  display: block;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* disabled checkmark */
.container-check.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 不确定状态样式 */
.container-check .checkmark.indeterminate:after {
  content: "";
  position: absolute;
  display: block;
  left: 3px;
  top: 6px;
  width: 10px;
  height: 2px;
  background-color: white;
  border: none;
  transform: none;
}

.container-check input:checked ~ .checkmark.indeterminate:after {
  display: block;
}

JavaScript #

$(document).ready(function() { 
  var checkboxes = document.querySelectorAll('input.subOption'), 
      checkall = document.getElementById('option'); 

  for (var i = 0; i < checkboxes.length; i++) { 
    checkboxes[i].onclick = function() { 
      var checkedCount = document.querySelectorAll('input.subOption:checked').length; 
      checkall.checked = checkedCount > 0; 
      var isIndeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
      checkall.indeterminate = isIndeterminate;
      checkall.nextElementSibling.classList.toggle('indeterminate', isIndeterminate);
    } 
  } 

  checkall.onclick = function() { 
    for (var i = 0; i < checkboxes.length; i++) { 
      checkboxes[i].checked = this.checked; 
    }
    this.indeterminate = false;
    this.nextElementSibling.classList.remove('indeterminate');
  } 
});

为什么这样能解决问题？ #

• 原生indeterminate属性是给浏览器自带的复选框用的，但我们把原生复选框隐藏了，所以必须把这个状态通过类传递给自定义的checkmark元素。
• 用classList.toggle可以根据状态自动添加/移除类，让CSS能精准匹配到不确定状态的样式。
• 我把不确定状态的样式改成了常见的横线样式，你也可以根据自己的设计需求调整尺寸、颜色这些细节。

内容的提问来源于stack exchange，提问作者Mustafa.B