购物车案例

 购物车全选时，其下的所有商品也会被选择

当取消全选时，其下的所有商品也会被取消选择

当所有商品都被选择时，全选按钮会被勾选，且只要有一个商品取消选择，全选按钮也会取消勾选

<input type="checkbox" id="shoppingCart">全选/全不选
    <ul class="commodity">
        <li>
            <input type="checkbox">1
        </li>
        <li>
            <input type="checkbox">2
        </li>
        <li>
            <input type="checkbox">3
        </li>
        <li>
            <input type="checkbox">4
        </li>
    </ul>

    <script>
        var shoppingCart = document.querySelector("#shoppingCart")//获取shoppingcart
        var commodity = document.querySelectorAll(".commodity input")//获取commodity中的input
        shoppingCart.onclick = function(){//shoppingcart在被点击时
            
            for(var i = 0;i<commodity.length;i++){//遍历commodity的各项
                commodity[i].checked = shoppingCart.checked//shopping cart被选中时就把commodity中的各项选中
            }
        }
        for(var i = 0;i<commodity.length;i++){//第二步，首先遍历commodity各项
            commodity[i].onclick = function(){//建立commodity各项被选中时的函数
                var flag = true//定义一个"旗帜"，默认属性为true
                for(var j=0;j<commodity.length;j++){//遍历commodity

                    if(commodity[j].checked == false){//如果commodity中有一项未被选中时

                        flag = false//"旗帜"属性改为false
                }
            }shoppingCart.checked = flag//"旗帜"属性的值赋予shopping cart
            }
            
        }
</script>