js_实现购物车全选以及取消全选的效果

最新推荐文章于 2025-05-20 16:08:55 发布

原创最新推荐文章于 2025-05-20 16:08:55 发布 · 5.1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#全选 #js #购物车

本文介绍了一种购物车中实现全选功能的方法，通过HTML和JavaScript实现了页面上商品图片的选择功能。用户可以通过点击全选按钮来选择所有的商品或者单独选择每个商品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现购物车的效果</title>
    <style>
        img {
            width: 150px;
            height: 90px;
        }
    </style>
</head>
<body>
<input id="checkall" type="checkbox">全选
<hr>
<input id="check1" type="checkbox">全选
<div>
    <input id="good1" type="checkbox"><img src="img/good.jpg"> <br>
    <input id="good2" type="checkbox"><img src="img/good2.jpg">
</div>
<hr>
<input id="check2" type="checkbox">全选
<div>
    <input id="good3" type="checkbox"><img src="img/good.jpg"> <br>
    <input id="good4" type="checkbox"><img src="img/good2.jpg">
</div>
<hr>
</body>
<script>
    var checkall = document.getElementById('checkall');
    var input = document.getElementsByTagName('input');
    var check1 = document.getElementById('check1');
    var check2 = document.getElementById('check2');
    var div = document.getElementsByTagName('div');
    var length = input.length;
    checkall.onclick = function () {
        for(var i=0;i<length;i++) {
            input[i].checked = this.checked;
        }
    }

    check1.onclick = function () {
        var good1 =div[0].childNodes;
        var good1length = good1.length;
        for(var i=0;i<good1length;i++) {
            good1[i].checked = this.checked;
        }
    }

    check2.onclick = function () {
        var good1 =div[1].childNodes;
        var good1length = good1.length;
        for(var i=0;i<good1length;i++) {
            good1[i].checked = this.checked;
        }

    }

</script>
</html>

效果图：