在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));
});
});