checkbox 选择是中间一个√ 中间横杆是什么操作

Question

checkbox 选择是中间一个√ 中间横杆是什么操作

经常看到子集如果不是全选，父级的 checkbox 中间就是一个横杆，很少去考虑这个。今天要用到了，特然不知道怎么来的，就知道要么是选择，要么是不选择

华东这个 jQuery 做了什么操作

Answer 1

indeterminate: https://developer.mozilla.org...

Answer 2

CheckBox的默认样式是没有办法修改的，这些样式都是模拟的，通过after或者before来模仿CheckBox的样式，比如一个CheckBox的样式如下

input[type="checkbox"] {
  width: 12px;
  position: relative;
  // top: -2px; // 与:before的top:-1px 抵消
  cursor: pointer;
  padding: 0;
  margin: 0;
  // Box.
  &+label:before {
    content: '';
    display: inline-block;
    vertical-align: text-top;
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid $border-color;
    position: relative;
    top: -1px;
  }
  // Box hover
  &+label:hover:before {
    border: 1px solid $brand-primary;
  }
  // Box checked
  &+label:checked:before {
    background: $brand-primary;
  }
  // Disabled state label.
  &+label:disabled {
    color: #b8b8b8;
    cursor: auto;
  }
  // Disabled box.
  &+label:disabled:before {
    box-shadow: none;
    background: #ddd;
  }
  // Checkmark. Could be replaced with an image
  &+label:checked:after {
    content: '';
    position: absolute;
    left: 0px;
    width: 12px;
    height: 12px;
    background: url(/static/dashboard/img/checkbox_checked.png);
  }
  &+label:checked:disabled:hover:before{
    border: 0;
  }
}

通过CheckBox是否勾选，来设置不一样的样式，华东的这里的实现，可以在上面的基础上，通过jQuery判断子级的是否全选，不是全选的情况下给CheckBox的input加一个不一样的类名（notAll），然后样式里面再增加一个根据notAll来判断的:after样式用来显示横线就行了，上面的样式里面是通过input的兄弟元素label来模拟CheckBox的效果，因为:before以及:after是不支持input标签的，为了兼容性，加一个兄弟元素