复选框选中与全选、删除及选中删除

var json = '[{"ename" : "John", "salary" : 6000, "age" : 20},{"ename" : 
"Ella", "salary" : 10000, "age" : 25},{"ename" : "Jack", "salary" : 5000,
 "age" : 18},{"ename" : "Chen", "salary" :106000, "age" : 30}]';
console.log(JSON.parse(json));
var arr = JSON.parse(json);

将以上数据添加到页面

创建元素，设置元素属性 ，将元素添加到HTML上

var div = document.getElementById('data');        
//创建ul        
var oul = document.createElement('ul');        
oul.className = 'thead';        
//将ul添加到父级元素上        
div.appendChild(oul);        
//创建li标签        
var li = document.createElement('li');        
//创建input        
var input = document.createElement('input');        
//设置input的type为复选框        
input.setAttribute('type','checkbox');        
//设置id        
input.setAttribute('id','check');        
// 将input添加到li标签上        
li.appendChild(input);
// 创建label
var label = document.createElement('label');
//设置label的属性，点击文字复选框也能选中
label.setAttribute('for','check');
//将文字添加到HTML页面上
label.innerHTML = '全选';
//将label标签添加到li标签上
li.appendChild(label);
//将li标签添加到ul上
oul.appendChild(li);
//创建操作li标签
var czli = document.createElement('li');
czli.innerHTML = '操作';
oul.appendChild(czli);

将值取出，添加到HTML上

//获取数组里对象的key值        
for(var i  in  arr[0]){           
 var oli = document.createElement('li');            
 oli.innerHTML = i;            
 oul.appendChild(oli);        
 }
for (var i = 0; i < arr.length; i++) {            
var oul = document.createElement('ul');            
div.appendChild(oul);
var input = document.createElement('input');
input.setAttribute('type','checkbox');
input.setAttribute('id','check');            
var lis = document.createElement('li');            
lis.appendChild(input);
oul.appendChild(lis);
//获取数组里对象的value值            
for (var key in arr[i]) {                
var oli = document.createElement('li');
oul.appendChild(oli).innerHTML = arr[i][key];            
}            
var delli = document.createElement('li');            
var a = document.createElement('a');            
a.innerHTML = '删除';            
delli.appendChild(a);            
oul.appendChild(delli);
}

选中部分

//找到除第一行以外的所有checkbox        
var che = document.querySelectorAll('ul:not(.thead) input');        
//通过id找到选项框        
var selid = document.getElementById('check');        
li.onclick = function(){            
for(var i = 0;i < che.length;i++){                
che[i].checked = selid.checked;            
}        
}
for(var j = 0;j < che.length;j++){            
che[j].onclick = check;        
}        
function check(){            
if(this.checked){                
//除第一行以外的所有checkbox                
var che_xz = 
document.querySelectorAll('ul:not(.thead) input:not(:checked)');
//如果che_xz数组(选中)的长度= 0，表示所有checkbox都被选中
if(che_xz.length == 0){
//全选勾中
selid.checked = true;
}else{
//全选不勾中
selid.checked = false;  
}            
}else{                
//取消全选                
selid.checked = false;            
}        
}

删除部分

//获取删除按钮
var btn = document.getElementsByTagName('a');
//循环获取点击的按钮
for(var i = 0 ; i < arr.length;i++){
btn[i].onclick = function(){
this.parentNode.parentNode.remove();
}
}
//批量删除
var delet = document.getElementsByTagName('button');
delet[0].onclick = function(){
//将选中的数据存放到dele数组中
var dele = document.querySelectorAll('ul:not(.thead) input:checked');            if(dele.length == 0){
//没有选中数据
alert('请选中需要删除的选项');
}else{  //否则删除选中数据
for(var n = 0;n < dele.length;n++){
dele[n].parentNode.parentNode.remove();
}
}
}