【购物车全选案例】(html,css,javascript)

最新推荐文章于 2024-03-18 23:01:18 发布

王猫粮

最新推荐文章于 2024-03-18 23:01:18 发布

阅读量230

点赞数

文章标签： javascript servlet java

本文链接：https://blog.csdn.net/m0_70684059/article/details/129749529

版权

<body>
    <input type="checkbox" id="all">全选
    <hr>
    <ul class="shop">
        <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 oAll=document.getElementById("all")
        var oitems=document.querySelectorAll(".shop input")
        //全选
        oAll.onclick=function(){
            for( var i=0;i<oitems.length;i++){
                oitems[i].checked=oAll.checked
            }
        }
        //
        for(var i=0;i<oitems.length;i++){
            oitems[i].onclick=function(){
                count=0
                //for判断每一项，如果checked count++
                for(var i=0;i<oitems.length;i++){
                    if(oitems[i].checked) count++
                }
                if(count===oitems.length){
                    oAll.checked=true
                }else{
                    oAll.checked=false
                }
            }
        }
    </script>
</body>