第21车厢-input全选/取消全选功能底加啦！

本篇介绍常用的全选/取消全选功能---jquery应用篇

在input的世界里，最常做的就是抓值/取值，不然就是做全选/取消全选功能吧?
在一般文章介绍里不意外就是分享这样下面的写法

HTML

  <div class="checkAllWrap">
    <div class="formGroup">
      <input type="checkbox" class="checkAll" />
      <label>全选</label>
    </div>
    
    <div lass="formGroup">
      <input type="checkbox" name="sort" value="小鲜肉">
      <label>小鲜肉</label>
    </div>

    <div lass="formGroup">
      <input type="checkbox" name="sort" value="欧巴">
      <label>欧巴</label>
    </div>
    
    <div lass="formGroup">
      <input type="checkbox" name="sort" value="大叔">
      <label>大叔</label>
    </div>
    
    <div lass="formGroup">
      <input type="checkbox" name="sort" value="宅男">
      <label>宅男</label>
    </div>
    
    <div lass="formGroup">
      <input type="checkbox" name="sort" value="肌肉男">
      <label>肌肉男</label>
    </div>
    
</div>

当全选被click时，如果他是被checked会回传true，就会将命名为sort的input被勾选;反之;

$(".checkAll").click(function(){
    if($(".checkAll").prop("checked")){//如果全选按钮有被选择的话（被选择是true）
    $("input[name='sort']").prop("checked",true);//把所有的核取方框的变成勾选
   }else{
    $("input[name='sort']").prop("checked",false);//把所有的核取方框都取消勾选
   }
 })

这样的写法，如果你整个网页只有一个区域要做全选/取消全选功能当然没问题！，但如果我们一个网页中有很多区块都需要用到呢?这个写法就会有问题了吧！

那～～～要怎麽做到共用？

那麽你就需要改写成这样
需判定你input框是在哪一个区域点的
1.当全选被按时，如果他是被check的就是为ture 将下面的input[name='sort']也都改为ture;反之
2.当下面input[name='sort']被按时，如果有一个是取消勾选就要把全选的V拿掉，如果下面的input[name='sort']都打V时(也就是刚好等於有几个input[name='sort']时)，就要把全选也打V

$(function () {
 //全选被按
  $(".checkAll").click(function () {
    var isCheck = $(this).prop("checked");
    $(this).closest(".checkAllWrap").find("input[name='sort']").prop("checked", isCheck);
  });
  
  $(".checkAllWrap input[name='sort']").click(function () {
    
  var el_checkAll = $(this).closest(".checkAllWrap").find(".checkAll");
    
  var checkLength = $(this).closest(".checkAllWrap").find("input[name='sort']:checked").length;// 每区块目前被V的有几个
    
  var inputLength =
    $(this).closest(".checkAllWrap").find("input[name='sort']").length; // 每区块的核取框有多少
    
  
    if (!$(this).prop("checked")) {
      el_checkAll.prop("checked", false);
    } else {
      if (checkLength == inputLength) {
          el_checkAll.prop("checked", true);
      }
    }
  });
 
});

这样就完成了！