编程练习，用JS实现购物车特效教程-慕课网

2-8 编程练习

本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，使用JS完成一个列表项的选择功能，包括全选，单选，并计算已选的数目。

效果图:

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能。

任务

一、静态布局制作，实现广告部分和正文部分。

提示:
使用li标签存放选项。

二、用JS实现选择功能。

1. 计算已选项函数：

提示:
　　1）说明一个变量ret，初始值为零
　　2）变量所有列表项，如果此项已选，ret自加1
　　3）把ret的最终值写入显示结果的元素的html里

2. 添加全选框的onchange事件：

提示:
　　1）遍历所有列表项，把每一项的checked值改为全选框的checked值
　　2）调用计算已选项函数

3. 添加每个列表项的事件

提示:
　　遍历所有列表项，为每一项添加onchange事件，调用计算已选项函数

注意：只要有一项未选择，则要把全选框的checked变更false。

index.html

<!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');
 
            // 计算已选项的总数
 
 
            // 全选事件
 
 
            // 每个选项的事件
 
        }
    </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>

下一节