视频已发。截图如下:
1.点击全选按钮,则选中所有选项
2.只要某个选项取消,则自动取消全选按钮的勾选状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>世界上最幸福的事</h3><input type="checkbox" id="all" >我全都要<br><input type="checkbox" class="thing" >吃饭<br><input type="checkbox" class="thing" >睡觉<br><input type="checkbox" class="thing" >旅游<br><input type="checkbox" class="thing" >学习<br>
</body>
<script>//1.获取元素var all=document.querySelector('#all');var things=document.querySelectorAll('.thing');//2.给all注册点击事件,选中/取消所有选项all.onclick = function () {for(var i=0;i<things.length;i++){things[i].checked=all.checked;}}//3.给things注册点击事件for(var i=0;i<things.length;i++){things[i].onclick = function () {//检测是不是所有的thing 都被选中了all.checked=thingsCheck(things);}}//4.实现thingsCheckfunction thingsCheck(things) {for(var i=0;i<things.length;i++){if(!things[i].checked){return false;}}return true;}
</script>
</html>