<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dz {
margin: 20px auto;
text-align: center;
}
button {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="dz">
<div><input type="checkbox" name="in">姓名:李四1
<button type="button" class="deld">删除</button>
<br></div>
<div>
<input type="checkbox" name="in">姓名:李四2
<button type="button" class="deld">删除</button>
<br>
</div>
<div>
<input type="checkbox" name="in">姓名:李四3
<button type="button" class="deld">删除</button>
<br>
</div>
<div>
<input type="checkbox" name="in">姓名:李四4
<button type="button" class="deld">删除</button>
<br>
</div>
<div>
<input type="checkbox" name="in">姓名:李四5
<button type="button" class="deld">删除</button>
<br>
</div>
<div>
<input type="checkbox" name="in">姓名:李四6
<button type="button" class="deld">删除</button>
<br>
</div>
<br>
<div>
<button type="button" onclick="myall()" id="b1">全选</button>
<button type="button" onclick="myno()" id="b2">全不选</button>
</div>
</div>
<script>
var aa = document.getElementsByName("in");
function myall() {
for (var o of aa) {
o.checked = true;
}
}
var nn = document.getElementsByName("in");
function myno() {
for (var n of nn) {
n.checked = false;
}
}
var bb = document.getElementsByClassName("deld");
setInterval(f, 20);
function f() {
for (var b of bb) {
b.onclick = function () {
b.parentElement.remove();
}
}
}
</script>
</body>
</html>
结果: