全选，全不选功能

末蓝、 2022-11-17 05:09 371阅读 0赞

需求：

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

发表评论取消回复

表情：

评论列表（有 0 条评论，371人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、全不选、反选功能

效果图 ![20191011213342751.gif][] 代码部分： <!DOCTYPE html> <html> <head>

矫情吗；*/ 2023年06月06日 12:25/ 0 赞/ 6 阅读

相关 JQ 下 checkbox 全选、全不选功能

需要引入jq.js HTML <input onclick="allchose($(this))" type="checkbox" name="" id="" va

向右看齐/ 2022年12月20日 01:53/ 0 赞/ 208 阅读

相关全选全不选案例

全选框案例：先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

以你之姓@/ 2022年12月19日 13:09/ 0 赞/ 268 阅读

相关全选，全不选功能

需求： 1.点击全选，子项全部选中，再次点击，则全部不选中。 2.选中全部子项，全选选中，没有选中则不选中全选按钮。前端部分：调

末蓝、/ 2022年11月17日 05:09/ 0 赞/ 372 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 347 阅读

相关 JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：

旧城等待，/ 2022年07月14日 14:09/ 0 赞/ 443 阅读

相关 Jquery 实现全选全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>attr</title>

ゞ浴缸里的玫瑰/ 2022年06月05日 00:16/ 0 赞/ 426 阅读

相关 js全选/全不选/反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年05月13日 10:08/ 0 赞/ 385 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 666 阅读

相关 jQuery中实现全选，全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

蔚落/ 2021年09月18日 23:04/ 0 赞/ 506 阅读