**记个笔记,方便自己以后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'));
}
}
```
前端checkbox实现全选,获取选中自定义属性的值
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aodeng110/article/details/82682448
猜你喜欢
转载自blog.csdn.net/aodeng110/article/details/82682448
今日推荐
周排行