一，今日学习内容：
1.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<div>
<input type="checkbox" id="al">全选
</div>
<div>
<input type="checkbox" class="check">1
<input type="checkbox" class="check">2
<input type="checkbox" class="check">3
<input type="checkbox" class="check">4
<input type="checkbox" class="check">5
<input type="checkbox" class="check">6
<input type="checkbox" class="check">7
<input type="checkbox" class="check">8
</div>
<input type="button" id="btn" value="反选">
</form>
<script>
const al = document.querySelector('#al');
const check = document.querySelectorAll('.check');
const btn = document.querySelector('#btn');
// let flag = true;
// 全选
console.log(check.length)
let cout = 0;
al.addEventListener('click', function () {
if (al.checked == true) {
check.forEach(function (v) {
if (v.checked == false) {
v.checked = true;
cout++;
}
})
console.log(cout);
} else if (al.checked == false) {
check.forEach(function (v) {
if (v.checked == true) {
v.checked = false;
cout--;
}
})
}
check.forEach(function (v) {
})
})
check.forEach(function (v) {
v.addEventListener('click', function () {
if (v.checked == false) {
al.checked = false;
cout--;
} else {
cout++;
}
console.log(cout);
if (cout == check.length) {
al.checked = true;
}
})
})
// 反选
btn.addEventListener('click', function () {
check.forEach(function (v, i) {
if (v.checked == true) {
v.checked = false;
al.checked = false;
cout--;
} else if (v.checked == false) {
v.checked = true;
cout++;
}
})
if (cout == 8) {
al.checked = true;
}
})
</script>
</body>
</html>
|
