<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn1">全选</button>
<button id="btn2">全不选</button>
<button id="btn3">添加</button>
<ul id="list"></ul>
<script>
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
var btn3 = document.querySelector('#btn3');
var btn4 = document.querySelector('#btn4');
var list = document.querySelector('#list');
btn1.onclick = function () {
var chks = document.querySelectorAll('input');
for (var i = 0; i < chks.length; i++) {
chks[i].checked = true;
}
}
btn2.onclick = function () {
var chks = document.querySelectorAll('input');
for (var i = 0; i < chks.length; i++) {
chks[i].checked = false;
}
}
//添加
btn3.onclick = function () {
// 创建一个li
var item = document.createElement('li');
// 创建一个复选框
var chk = document.createElement('input');
chk.type = 'checkbox';
item.appendChild(chk); //复选框追加到li里
// 创建一个删除按钮
var btn = document.createElement('button');
btn.onclick = function () {
this.parentNode.remove(); //删除父元素即li
}
btn.innerHTML = '删除';
item.appendChild(btn);
list.appendChild(item);
}
//The achievement is attributed to miss peng
</script>
</body>
</html>