完整代码和具体逻辑如下

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框（checkbox）全选/全不选/返选</title>
    <style>
      body,
      dl,
      dt,
      dd,
      p {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Tahoma;
        font-size: 12px;
      }
      label,
      input,
      a {
        vertical-align: middle;
      }
      label {
        padding: 0 10px 0 5px;
      }
      a {
        color: #09f;
        text-decoration: none;
      }
      a:hover {
        color: red;
      }
      dl {
        width: 120px;
        margin: 10px auto;
        padding: 10px 5px;
        border: 1px solid #666;
        border-radius: 5px;
        background: #fafafa;
      }
      dt {
        padding-bottom: 10px;
        border-bottom: 1px solid #666;
      }
      dt label {
        font-weight: 700;
      }
      p {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>
        <input type="checkbox" id="checkAll" />
        <label id="nocheck">全选</label>
        <a href="javascript:;" id="fanxuan">反选</a>
      </dt>
      <dd>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（一）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（二）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（三）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（四）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（五）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（六）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（七）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（八）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（九）</label>
        </p>
        <p>
          <input type="checkbox" name="item" />
          <label>选项（十）</label>
        </p>
      </dd>
    </dl>
    <center>
      1、切换全选/全不选文字；
      <br />
      <br />
      2、根据选中个数更新全选框状态；
    </center>
  </body>

  <script>
    //知识点： 选项卡被选中的时候，this.checked = true
    // 找到全选按钮
    var checkAll = document.getElementById("checkAll");
    // 找到所有的子选项卡
    var itemArray = document.querySelectorAll("p>input");
    // 找到全选这两个字，下面需要更改
    var noCheck = document.getElementById("nocheck");
    // 反选按钮
    var fanxuan = document.getElementById("fanxuan");

    // 全选按钮被选中的时候，子选项卡的checked也变成true
    checkAll.onclick = function () {
      // 如果全选被勾上了，那么旁边的数字就要变成全不选
      if (checkAll.checked) {
        noCheck.innerHTML = "全不选";
      }
      //   如果全选按钮没被勾上，那么旁边的文字还是全选
      if (!checkAll.checked) {
        noCheck.innerHTML = "全选";
      }

      // 通过遍历，获取所有的自选项卡
      for (var i = 0; i < itemArray.length; i++) {
        //     全选和自选卡的checked要一致
        itemArray[i].checked = checkAll.checked;
      }
    };

    // 怎么判断有没有全部选上，当子选项卡被选中的时候，.checked= true
    // 这个true也可以当做1来看待
    // 这个逻辑要在其他地方也要用到，把这些内容写在一个函数里面,判断全选的状态是否应该发生改变
    function isCheckAll() {
      // 定义选中的数量，默认是0
      var checkedNum = 0;
      for (var i = 0; i < itemArray.length; i++) {
        // 只要有选中的，选中的数量就自增(true这里被当做1来使用)
        if (itemArray[i].checked) {
          checkedNum++;
        }
      }
      // 如果子选项卡被选中的数量为子选项卡的数量（也就是子选显卡全部选中了 ），那么全选按钮的checked就是true
      if (checkedNum === itemArray.length) {
        checkAll.checked = true;
        noCheck.innerHTML = "全不选";
      } else {
        checkAll.checked = false;
        noCheck.innerHTML = "全选";
      }
    }

    // 函数定义完了，找到所有的子选项卡，只要点击了其中一个，就会执行这个函数

    for (var i = 0; i < itemArray.length; i++) {
      itemArray[i].onclick = function () {
        isCheckAll();
      };
    }

    // 点击了反选按钮，子选项卡选中状态就取反
    fanxuan.onclick = function () {
      for (var i = 0; i < itemArray.length; i++) {
        itemArray[i].checked = !itemArray[i].checked;
      }
      // 现在还不能让全选框生效，所以再执行一次isCheckAll
      isCheckAll();
    };
  </script>
</html>

DOM做一个选项卡，生成全选，反选，子选项卡和全选同步的效果

完整代码和具体逻辑如下