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

已邀请:
<!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" class="check">星座
        <form id="constellation">
            <input id="aquarius" type="checkbox">水瓶座
            <input id="leo" type="checkbox">狮子座
        </form>
        <input type="checkbox" onclick="clickVehicle()" id="vehicles" class="check">车
        <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代码:
全选
选项1
选项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;
};

cdns20150714

赞同来自:

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

要回复问题请先登录注册