需求:
1.点击全选,子项全部选中,再次点击,则全部不选中。
2.选中全部子项,全选选中,没有选中则不选中全选按钮。
前端部分:
调用:Ack.checkedChoicefn("itemsAll","items");
<div class="controls">
<label class="checkbox" >
<input type="checkbox" value="1" name="itemsAll" id="itemsAll" class="checkAllweek"/> 全选
</label>
<label class="checkbox" >
<input type="checkbox" name='items' id="items1" value="1" />周日
</label>
<label class="checkbox" >
<input type="checkbox" name='items' id="items2" value="1" />周一
</label>
<label class="checkbox" >
<input type="checkbox" name='items' id="items3" value="1" />周二
</label>
<label class="checkbox" >
<input type="checkbox" name='items' id="items4" value="1" />周三
</label>
<label class="checkbox" >
<input type="checkbox" name='items' id="items5" value="1" />周四
</label>
<label class="checkbox">
<input type="checkbox" name='items' id="items6" value="1" />周五
</label>
<label class="checkbox" >
<input type="checkbox" name='items' id="items7" value="1" />周六
</label>
<div id="item_error1"></div>
</div>
js部分:
var Ack = function(){
return{
init:function{
checkedChoicefn(allclick,namefn){
$("#"+allclick).on("click",function(){
if($(this).is(':checked')){
$("input[name='"+namefn+"']:checkbox").each(function(){
$(this).prop("checked",true);
$(this).parents("span").addClass("checked");
});
} else {
$("input[name='"+namefn+"']:checkbox").each(function() {
$(this).removeAttr("checked",false);
$(this).parents("span").removeClass("checked");
});
}
})
let items = document.getElementsByName(""+namefn+"");
for (let i = 0; i < items.length; i++) {
items[i].onclick = function() {
let number = 0;//记录选中的个数
for (let j = 0; j < items.length; j++) {
if (items[j].checked) {
number++;
}
}
if(items.length == number){
$("#"+allclick).prop("checked",true);
$("#"+allclick).parents("span").addClass("checked");
}else{
$("#"+allclick).removeAttr("checked",false);
$("#"+allclick).parents("span").removeClass("checked");
}
}
}
}
}
}
}()