checkbox的indeterminate属性使用介绍

checkbox的indeterminate属性使用介绍

概述

checkbox是前端常用的控件之一，可以用来表示两种状态：选中或未选中。但实际开发中，有时候需要对多个checkbox进行操作，这时候判断这些checkbox的选中状态就有些繁琐了。所以，checkbox提供了一个特殊的状态：indeterminate（半选中状态），可以在未完全选中或未完全取消选中的情况下，表示一个节点或者子节点下部分数据选中的情况。

使用方法

1. 在HTML中设置checkbox的indeterminate属性

在HTML中设置checkbox的indeterminate属性可以通过DOM的方法，也可以直接在HTML标签中设置。其中，DOM方法包括setAttribute和removeAttribute方法，而在HTML标签中设置可以通过如下方式实现：

<input type="checkbox" id="check" indeterminate>

1. JavaScript中通过属性设置indeterminate状态

通过JavaScript属性设置checkbox的indeterminate状态是比较常用的方法，可以分为两个步骤：

（1）先选中checkbox控件

var checkbox = document.getElementById('check');

（2）设置checkbox的indeterminate属性为true或false

checkbox.indeterminate = true;

示例说明

示例1：对checkbox全选进行操作

需求：在一个复杂表单里，有多个商品数据需要展示，并且每个商品都有对应的checkbox，为表单做全选、反选等操作。

实现方法：获取所有checkbox的DOM节点，对checkbox的checked和indeterminate属性进行操作。

<input type="checkbox" id="checkAll"> 全选
<input type="checkbox" class="checkSub"> 商品1
<input type="checkbox" class="checkSub"> 商品2
<input type="checkbox" class="checkSub"> 商品3
<input type="checkbox" class="checkSub"> 商品4

var checkAll = document.querySelector('#checkAll');
var checkSub = document.querySelectorAll('.checkSub');
checkAll.addEventListener('change', function () {
  for (var i = 0; i < checkSub.length; i++) {
    checkSub[i].checked = this.checked;
    checkSub[i].indeterminate = false;
  }
});
for (var i = 0; i < checkSub.length; i++) {
  checkSub[i].addEventListener('change', function () {
    var checkedCount = 0;
    for (var j = 0; j < checkSub.length; j++) {
      if (checkSub[j].checked) {
        checkedCount++;
      }
    }
    checkAll.checked = checkedCount === checkSub.length;
    checkAll.indeterminate = checkedCount !== 0 && checkedCount !== checkSub.length;
  });
}

示例2：checkbox的多级联动操作

需求：页面中有一个“全选”按钮，当其中的一项（父级）被选中时，下一级的所有checkbox也应该被选中，但如果下一级的某一项被手动取消选择，则父级的状态也应变为“半选择状态”。

实现方法：对父子级别checkbox的checked和indeterminate属性进行操作。

<input type="checkbox" id="parent"> 父级
  <ul>
    <li><input type="checkbox" class="child"> 子级1</li>
    <li><input type="checkbox" class="child"> 子级2</li>
  </ul>

var parent = document.getElementById('parent');
var child = document.querySelectorAll('.child');
parent.addEventListener('change', function () {
  for (var i = 0; i < child.length; i++) {
    child[i].checked = this.checked;
    child[i].indeterminate = false;
  }
});
for (var i = 0; i < child.length; i++) {
  child[i].addEventListener('change', function () {
    var checkedCount = 0;
    for (var j = 0; j < child.length; j++) {
      if (child[j].checked) {
        checkedCount++;
      }
    }
    parent.checked = checkedCount === child.length;
    parent.indeterminate = checkedCount !== 0 && checkedCount !== child.length;
  });
}

以上，就是对于checkbox的indeterminate属性使用介绍的详细攻略了。