有手就行系列——复选框的联动

页面布局

功能分析

勾选框的联动是实现全选框与下面的勾选框联动，联动情况有很多种：

• 全选按钮勾选时，若取消勾选下面任意一个商店的checkbox，全选按钮则取消
  
• 全选按钮勾选时，若取消勾选下面任意一个商店中商品的checkbox，全选按钮则取消

• 商店的全选按钮处于未选中状态时，当该商店下商品全部勾选时，该商店全选按钮改为选中状态
  

• 该商店的全选按钮选中状态改变时，该商店下的所有按钮也应改变对应的选中状态
  

• 该商店的全选按钮处于选中状态时，若该商店下有任意一个商品取消勾选状态，则该商店的全选按钮取消选中状态

• 全选按钮未选中状态时，若其它所有按钮处于选中状态，则全选按钮改为选中状态。

一个很不起眼的小功能，但在开发的过程中遇到很多问题。分析完各种情况后，我们来开始着手代码

// 商品按钮
$('.checkGood').click(function () {
  var allShopGoods = $('.cart-body .allShopGoods'); //所有商店全选按钮集合
  var flag2 = 0; //选中商店计数
  for (var k = 0; k < allShopGoods.length; k++) {
    var flag = 0; //选中商品计数
    //记录当前商品列表的商品数量
    var listlength = $('.goodlist').eq(k).find('.goodform').length;
    //遍历当前商店下的所有商品，如果有未勾选的，则当前商品全选按钮取消勾选
    for (var i = 0; i < listlength; i++) {
      //当前商店的商品
      var checkGood_now = $('.goodlist').eq(k).find('.goodform .checkGood');
      if (!checkGood_now.eq(i).prop('checked')) {
      } else if (checkGood_now.eq(i).prop('checked')) {
        flag += 1;
      }
      if (flag < listlength) {
        allShopGoods.eq(k).prop('checked', false);
        $('.allCartGoods').prop('checked', false);
      } else if (flag == listlength) {
        // 若选择了则计数+1，当flag==length时表示该商店下商品全选了
        allShopGoods.eq(k).prop('checked', true);
      }
    }
    if (allShopGoods.eq(k).prop('checked')) {
      flag2++;
    }
    if (flag2 == allShopGoods.length) {
      $('.allCartGoods').prop('checked', true);
    } else {
      $('.allCartGoods').prop('checked', false);
    }
  }
});
//商店全选按钮
$('.allShopGoods').click(function () {
  var shopflag = 0; //选中商店计数
  var allShopGoods = $('.cart-body .allShopGoods'); //所有商店全选按钮集合
  // 思路：如果当前商店按钮为true，下面的商品按钮也为true
  //当前商店的商品
  var checkGood_now = $(this).parent().next().find('.goodform .checkGood');
  if ($(this).prop('checked')) {
    for (var i = 0; i < checkGood_now.length; i++) {
      checkGood_now.eq(i).prop('checked', true);
    }
  } else {
    for (var i = 0; i < checkGood_now.length; i++) {
      checkGood_now.eq(i).prop('checked', false);
    }
  }
  for (var i = 0; i < allShopGoods.length; i++) {
    if (allShopGoods.eq(i).prop('checked')) {
      shopflag++;
    }
  }
  //如果所有商店的商品全选按钮都被选中，则购物车全选按钮为true
  if (shopflag == allShopGoods.length) {
    $('.allCartGoods').prop('checked', true);
  } else {
    $('.allCartGoods').prop('checked', false);
  }
});
//购物车全选按钮
$('.allCartGoods').click(function () {
  var allShopGoods = $('.cart-body .allShopGoods'); //所有商店全选集合
  var allgoods = $('.checkGood');
  
  //思路：当全选时，所有商店全选按钮被选中且所有商品被选中
  for (var i = 0; i < allShopGoods.length; i++) {
    if ($('.allCartGoods').prop('checked')) {
      allShopGoods.eq(i).prop('checked', true);
    } else {
      allShopGoods.eq(i).prop('checked', false);
    }
  }
  for (var i = 0; i < allgoods.length; i++) {
    if ($('.allCartGoods').prop('checked')) {
      allgoods.eq(i).prop('checked', true);
    } else {
      allgoods.eq(i).prop('checked', false);
    }
  }
});