学习是最好的投资！
不知道你的HTML是啥，总之原理就是在全选的input上监听change事件，然后设置其他需要选中的input的checked属性。
input
change
checked
下面只是一个简单的演示，实际怎样写请自己研究。
HTML代码：
<input id="check_all" type="checkbox">全选 <input id="item1" type="checkbox">选项1 <input id="item2" type="checkbox">选项2
JS代码：
check_all = document.getElementById('check_all'); item1 = document.getElementById('item1'); item2 = document.getElementById('item2'); check_all.onchange = function(){ item1.checked = item2.checked = this.checked; }; item1.onchange = item2.onchange = function(){ check_all.checked = item1.checked && item2.checked; };
通过定义css的类来进行逻辑上的分组，单击星座或者车时获取对应的逻辑分组
写的比较繁琐一些，就是练练手学习下找dom节点。。。<!DOCTYPE html><html><head>
<title></title> <style type="text/css"> ul li { list-style: none; } .check-all { float: left; } </style>
</head><body>
<p ><ul ><li class="check-all" ><input type="checkbox"/><span>全选</span ></li ><li class="check-all" ><ul ><li ><input type="checkbox"/><span>星座</span ></li ><li ><input type="checkbox"/><span>水瓶座</span ></li ><li ><input type="checkbox"/><span>狮子座</span ></li ></ul ></li ><li class="check-all" ><ul ><li ><input type="checkbox"/><span>车</span ></li ><li ><input type="checkbox"/><span>面包车</span ></li ><li ><input type="checkbox"/><span>单车</span ></li ></ul ></li ></ul ></p> <script type="text/javascript"> (function(){ var sel_arr = []; for(var i=0;i<document.querySelectorAll(".check-all").length;++i) { sel_arr.push(document.querySelectorAll(".check-all")[i]); } var changeCheckedAll = function(node) { var get_staus = node.checked; if(node === sel_arr[0].childNodes[0]){ for(var j=1;j<sel_arr.length;++j) { for(var k=0;k<sel_arr[j].childNodes[0].childNodes.length;++k) { if(get_staus){ sel_arr[j].childNodes[0].childNodes[k].childNodes[0].checked = true; }else { sel_arr[j].childNodes[0].childNodes[k].childNodes[0].checked = false; } } } }else { if(get_staus) { node.parentNode.nextSibling.childNodes[0].checked = true; node.parentNode.nextSibling.nextSibling.childNodes[0].checked = true; }else { node.parentNode.nextSibling.childNodes[0].checked = false; node.parentNode.nextSibling.nextSibling.childNodes[0].checked = false; } } } var AddEvent = function(node) { if(node.addEventListener){ node.addEventListener('change',function(){ changeCheckedAll(node); },false); }else { node.addEventAttach('onchange',function(){ changeCheckedAll(node); }); } } var sel_all = sel_arr[0].childNodes[0]; var sel_ch_one = sel_arr[1].childNodes[0].childNodes[0].childNodes[0]; var sel_ch_two = sel_arr[2].childNodes[0].childNodes[0].childNodes[0]; AddEvent(sel_all); AddEvent(sel_ch_one); AddEvent(sel_ch_two); })(); </script>
</body></html>
点击=>遍历选项=>设置勾选为true
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Checkbox Demo</title> </head> <body> <input id="check_all" type="checkbox" onclick="clickAll()">全选 <p id="all"> <input type="checkbox" onclick="clickConstellation()" id="constellations">星座 <form id="constellation"> <input id="aquarius" type="checkbox">水瓶座 <input id="leo" type="checkbox">狮子座 </form> <input type="checkbox" onclick="clickVehicle()" id="vehicles">车 <form id="vehicle"> <input id="bicycle" type="checkbox">单车 <input id="van" type="checkbox">面包车 </form> </p> <script type="text/javascript"> 'use strict'; var vehicle = document.getElementById("vehicle"); var constellation = document.getElementById("constellation"); function clickVehicle() { for (var i=0; i<vehicle.length; i++){ document.getElementById(vehicle.elements[i].id).click(); } } function clickConstellation() { for (var i=0; i<constellation.length; i++){ document.getElementById(constellation.elements[i].id).click(); } } function clickAll() { document.getElementById("constellations").click(); document.getElementById("vehicles").click(); } </script> </body> </html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
不知道你的HTML是啥，总之原理就是在全选的
input上监听change事件，然后设置其他需要选中的input的checked属性。下面只是一个简单的演示，实际怎样写请自己研究。
HTML代码：
JS代码：
通过定义css的类来进行逻辑上的分组，单击星座或者车时获取对应的逻辑分组
写的比较繁琐一些，就是练练手学习下找dom节点。。。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
点击=>遍历选项=>设置勾选为true