全选,全不选功能

需求:

       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");
                    }
                }
            }
        }
    }
    
    }
}()

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值