WebApi 全选和单选

点击小按钮全选，大按钮也得选择
思路：
点击任何一个小按钮，都得判断判断是否要选择大的，小按钮都得有点击事件
如何判断大按钮是否选择，我们就得知道三个小按钮选中状态，当小按钮都选择，大就按钮，否则大不选择

 
    // 获取元素
    var checkAll = document.getElementById('checkAll');
    // var cks = document.getElementsByClassName('ck');
    var cks = document.querySelectorAll('.ck');
    // 1、点击全选全不选
    checkAll.onclick = function () {
      // 先要知道大按钮是否选择，如果大按钮选择小按钮都选择，大按钮不选择，小按钮不选择
      var val = checkAll.checked;

      // 把所有小按钮的选择不选择的值设置为val
      for (var i = 0; i < cks.length; i++) {
        cks[i].checked = val;
      }

      // if (val == true) {
      //   所有小按钮都选择
      // } else {
      //   所有小按钮都不选择
      // }

    }


    // 2、点击小按钮全选，大按钮也得选择
    // 思路：
    // 点击任何一个小按钮，都得判断判断是否要选择大的，小按钮都得有点击事件
    // 如何判断大按钮是否选择，我们就得知道三个小按钮选中状态，当小按钮都选择，大就按钮，否则大不选择
    for (var i = 0; i < cks.length; i++) {// 为了遍历每一个元素添加事件

      cks[i].onclick = function () {

        // alert(123);
        // 假设：假设一个值，代表大按钮选择不选择，初始默认情况假设为选择
        var flag = true;
        // 如果三个小按钮都选择，那么flag不需要改动，如果有一个小按钮没有选择，我们就把flag改为false
        for (var j = 0; j < cks.length; j++) {// 为了查看每一个小按钮的checked的属性

          var result = cks[j].checked;

          // 判断result为false的时候，我们的假设不成立，把flag改为false
          if (result == false) {
            flag = false;
          }

        }

        // 当循环结束，这个时候，flag可能被改，也可能每改
        checkAll.checked = flag;

      }

    }