                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /用JS实现购物车特效

如果要在所有的选项都被选中后，全选的选项自动被选上，该怎么实现？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            padding: 20px;
        }

        li {
            float: left;
            margin: 20px;
        }
        #total {
            clear: both;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {

            // 获取元素
            var all = document.getElementById('all');
            var list = document.getElementById('list');
            var inputs = list.getElementsByTagName('input');
            var total = document.getElementById('total');

            // 计算已选项的总数

            function showTotal(){
                var selected = 0 ;
                for (var i = 0 ; i<inputs.length;i++){
                    if(inputs[i].checked){
                        selected += 1 ;
                    }
                    total.innerHTML = '已选：'+ selected+ '项';

                }
            }

            // 全选事件
            all.onchange = function () {
                for (var i = 0 ; i<inputs.length;i++){

                    inputs[i].checked = all.checked;
                    showTotal();
                }
            };

            // 每个选项的事件
            for (var i = 0; i<inputs.length; i++) {
                inputs[i].onchange = function () {
                    showTotal();
                    if (!this.checked) {
                        all.checked = false;
                    }
                    
                };
            }
            
        }
    </script>
</head>
<body>
<div><label><input id="all" type="checkbox"/>全选</label></div>
<ul id="list">
    <li><label><input type="checkbox"/>选项1</label></li>
    <li><label><input type="checkbox"/>选项2</label></li>
    <li><label><input type="checkbox"/>选项3</label></li>
    <li><label><input type="checkbox"/>选项4</label></li>
    <li><label><input type="checkbox"/>选项5</label></li>
    <li><label><input type="checkbox"/>选项6</label></li>
</ul>
<div id="total">已选：0 项</div>
</body>
</html>

qq_烟火里的尘埃_0

2015-12-26

源自：用JS实现购物车特效 2-8

关注问题我要回答

3513

操作

收起

4 回答

李晓健回答被采纳 +3 积分
2015-12-26

function showTotal(){
    var selected = 0 ;
    for (var i = 0 ; i<inputs.length;i++){
        if(inputs[i].checked){
            selected += 1 ;
        }
        total.innerHTML = '已选：'+ selected+ '项';
    }
    //如果选中项的个数等于所有项的个数就说明全部选中了
    if(selected == inputs.length){
        all.checked = true;
    }else{
        all.checked = false;
    }
}

这个方法里加一个判断就行了

3 回复有任何疑惑可以回复我~

收起回答

qq_烟火里的尘埃_0 提问者

非常感谢！

2015-12-28 回复有任何疑惑可以回复我~

梦想成真213 回复 qq_烟火里的尘埃_0 提问者

你的all.onchange这个事件中，showTotal()要放到for循环外面

2016-01-11 回复有任何疑惑可以回复我~

慕粉2135579427
2017-04-20

在showTotal函数最后加上return function(){return selected}

0 回复有任何疑惑可以回复我~

收起回答

狂飙的蜗牛_1
2015-12-26

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            padding: 20px;
        }
 
        li {
            float: left;
            margin: 20px;
        }
        #total {
            clear: both;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
 
            // 获取元素
            var all = document.getElementById('all');
            var list = document.getElementById('list');
            var inputs = list.getElementsByTagName('input');
            var total = document.getElementById('total');
			var selected = 0 ;
 
            // 计算已选项的总数
 
            function showTotal(){
               
                for (var i = 0 ; i<inputs.length;i++){
                    if(inputs[i].checked){
                        selected += 1 ;
                    }
                    total.innerHTML = '已选：'+ selected+ '项';
 
                }
            }
 
            // 全选事件
            all.onchange = function () {
                for (var i = 0 ; i<inputs.length;i++){
 
                    inputs[i].checked = all.checked;
                    showTotal();
                }
            };
 
            // 每个选项的事件
            for (var i = 0; i<inputs.length; i++) {
                inputs[i].onchange = function () {
					selected=0;//归零
                    showTotal();
					console.log(selected);
					if(selected>=6){
						all.checked = true;
						}else{
							all.checked = false;//必须
							}
                     
                }
            }
		}
    </script>
</head>
<body>
<div><label><input id="all" type="checkbox"/>全选</label></div>
<ul id="list">
    <li><label><input type="checkbox"/>选项1</label></li>
    <li><label><input type="checkbox"/>选项2</label></li>
    <li><label><input type="checkbox"/>选项3</label></li>
    <li><label><input type="checkbox"/>选项4</label></li>
    <li><label><input type="checkbox"/>选项5</label></li>
    <li><label><input type="checkbox"/>选项6</label></li>
</ul>
<div id="total">已选：0 项</div>
</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答

狂飙的蜗牛_1

在全选事件里面也要对selected归零，上面的代码里没写

2015-12-26 回复有任何疑惑可以回复我~