前端checkbox实现全选，获取选中自定义属性的值

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/aodeng110/article/details/82682448

**记个笔记，方便自己以后copy**
## body代码
```html
//操作按钮
<a onclick="check1()"> </a>
//表头
<input type="checkbox" id="awesome" name="ck" onclick="selectAll()"/>
//循环显示数据 uuid是自定义的属性 onclick是选中事件 value是值 name是js里面需要的
<input type="checkbox" id="awesome" name="cks" value="${item.projectId}" uuid="${item.invoiceState}" onclick="setSelectAll()"/>
```
## script操作
```html
//全选、取消全选的事件 使用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'));
             
       }
    }
```