级联checkbox实现逻辑 tips

记个笔记，方便自己以后copy

body代码

//操作按钮
<a οnclick="check1()"> </a>
//表头
<input type="checkbox" id="awesome" name="ck" οnclick="selectAll()"/>
//循环显示数据 uuid是自定义的属性 onclick是选中事件 value是值 name是js里面需要的
<input type="checkbox" id="awesome" name="cks" value="${item.projectId}" uuid="${item.invoiceState}" οnclick="setSelectAll()"/>

script操作

//全选、取消全选的事件 使用prop可以避免版本迭代的bug，避免出现只能全选一次 
function selectAll(){    
    if ($("input[name='ck']").prop("checked")) {          
        $("input[type='checkbox'][name='cks']").prop("checked",true);//全选
    } else {             
        $("input[type='checkbox'][name='cks']").prop("checked",false);  //取消全选     
    }  
}  
//子复选框的事件  
function setSelectAll(){
    //当没有选中某个子复选框时，SelectAll取消选中  
    if (!$("#ck").checked) {  
        $("#ck").prop("checked", false);  
    }  
    var chsub = $("input[type='checkbox'][name='cks']").length; //获取subcheck的个数  
    var checkedsub = $("input[type='checkbox'][name='cks']:checked").length; //获取选中的subcheck的个数  
    if (checkedsub == chsub) {  
        $("#ck").prop("checked", true);  
    }  
}
//点击操作获取值
function check1(){
    var str=[];
    var r=document.getElementsByName("cks"); 
    var uuid=[];
    for(var i=0;i<r.length;i++){
         if(r[i].checked){
             //获取选中的checkbox的值
             str.push(r[i].value);
            //获取选中的自定义属性的值
            uuid.push(r[i].getAttribute('uuid'));
             
       }
    }

---

作者：低调小熊猫
来源：CSDN
原文：https://blog.csdn.net/aodeng110/article/details/82682448
版权声明：本文为博主原创文章，转载请附上博文链接！