Skip to the content.

在SCRM5平台项目中,曾多次用到【全选/反选】功能,于是写了模块入库公用,只要三个class即可。 .js-check-cover 容器层,包裹了全选按钮和子选项按钮 .js-check-all 全选按钮,位置可随意放置,但要在容器层内 .js-check-item 子选项按钮,位置可随意放置,一样要在容器层内

HTML:

<div class="js-check-cover">
  <label><input class="js-check-all" type="text">Check all or Uncheck</label>

  <label><input class="js-check-item" type="text">Check item</label>
  <label><input class="js-check-item" type="text">Check item</label>
  <label><input class="js-check-item" type="text">Check item</label>
</div>

JS:

$(function(){
    $(".js-check-all").on("click",function(){
        (this.checked) ? ($(this).parents(".js-check-cover").find(".js-check-item").prop("checked",true)) : ($(this).parents(".js-check-cover").find(".js-check-item").prop("checked",false));
    });
    $(".js-check-item").on("click",function(){
        var checkedNum = $(this).parents(".js-check-cover").find(".js-check-item:checked").size();
        var checkNum = $(this).parents(".js-check-cover").find(".js-check-item").size();
        (checkedNum==checkNum) ? ($(this).parents(".js-check-cover").find(".js-check-all").prop("checked",true)) : ($(this).parents(".js-check-cover").find(".js-check-all").prop("checked",false));
    });
});