html javascript checkbox实现全选功能

html代码

<input type="checkbox" id="all" />all</input>
<input type="checkbox" class="one" onClick="funSelOne(this)"/>aa</input> 
<input type="checkbox" class="one" onClick="funSelOne(this)"/>aa</input> 
<input type="checkbox" class="one" onClick="funSelOne(this)"/>aa</input> 
<input type="checkbox" class="one" onClick="funSelOne(this)"/>aa</input> 

js代码：

$("#all").click(function(){     #给全选按钮添加点击事件，实现全选或全不选功能
     var xz = $(this).prop("checked");
     var ck = $(".one").prop("checked",xz);
})
    
function funSelOne(){　　　　　　#关联全选按钮与子按钮，当任意一个子按钮没被选中时，全选按钮不被选中，当所有按钮都选中时，全选按钮也被选中
    var one=$(".one");
    var all=$("#all")[0]
    var selCount=0;
    var unSelCount=0;
    for(var i=0;i<one.length;i++){
        if(one[i].checked==true){selCount++;}
        if(one[i].checked==false){unSelCount++;}
         if(selCount==one.length){$('#all').prop("checked",true);}
        if(unSelCount>0){$('#all').prop("checked",false);}
    }
}      

参考：https://www.cnblogs.com/xiaofox0018/p/6243723.html

https://blog.csdn.net/liuhailiuhai12/article/details/53815039