高洛峰2017-04-10 17:01:38
不知道你的HTML是啥，总之原理就是在全选的input上监听change事件，然后设置其他需要选中的input的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;
};
高洛峰2017-04-10 17:01:38
写的比较繁琐一些，就是练练手学习下找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>
怪我咯2017-04-10 17:01:38
<!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>