问答详情
源自：2-8 编程练习

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

<!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 16:48

个回答

  • 李晓健
    2015-12-26 22:08:07
    已采纳 

    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
  • 慕粉2135579427
    2017-04-20 15:38:08

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

    0
  • 狂飙的蜗牛_1
    2015-12-26 22:07:48

    <!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