小白求教！复选框全选问题用javascript编写！谢谢！

点击=>遍历选项=>设置勾选为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()">全选
    <div 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>
    </div>
    <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>

不知道你的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;
};

通过定义css的类来进行逻辑上的分组，单击星座或者车时获取对应的逻辑分组

写的比较繁琐一些，就是练练手学习下找dom节点。。。
<!DOCTYPE html>
<html>
<head>

<title></title>
<style type="text/css">
    ul li {
      list-style: none;
    }
    .check-all {
      float: left;
    }
</style>

</head>
<body>

<div
    ><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
></div>
<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>

【热门文章】

小白求教！ 复选框全选问题 用javascript编写！谢谢！

小白求教！复选框全选问题用javascript编写！谢谢！