实现简单的购物车页面

最新推荐文章于 2024-07-26 20:46:33 发布

哈虎a

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量234

点赞数 1

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/m0_58626552/article/details/123479403

版权

实现功能：

同意条款才能购买
全选功能
数量的加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.onload = function () {
            var agreebtn = document.querySelector("#agree");
            var buybtn = document.querySelector("#buy");
            var del = document.querySelector("#del");
            var count = document.querySelector("#count");
            var add = document.querySelector("#add");
            var all = document.querySelector("#all");
            var singlelist = document.querySelectorAll("#single");

            //1.同意条款才能购买
            //初始状态先禁用购买按钮
            buybtn.disabled = true;
            //条款按钮点击事件
            agreebtn.onchange = function () {
                buybtn.disabled = !buybtn.disabled
                //点击即取反
            }

            //2.实现加减和禁用
            //封装一个判断减是否解禁的函数
            function setDelState() {
                del.disabled = count.value == "1" ? true : false
            }
            //点击事件
            add.onclick = function () {
                count.value++;
                setDelState();
            }
            del.onclick = function () {
                count.value--
                setDelState();
            }

            //3.全选按钮功能实现
            //点击全选，single全部选中
            all.onchange = function () {
                for (var i = 0; i < singlelist.length; i++) {
                    singlelist[i].checked = all.checked;
                }
            }
            //single全部被选中后，全选自动被选中           
            for (var i = 0; i < singlelist.length; i++) {
                singlelist[i].onclick = function () {
                    //有一个single被点击后，问一下是不是全选状态
                    //如果是，all亮起，反之没有行为
                    //开关思想：只要有一个single被选中，就去判断是否能全选，如果有single没有被选中，就不能全选
                    var flag = true;
                    for(var j = 0; j<singlelist.length; j++){
                        if(!singlelist[j].checked){
                            flag = false;
                            break
                        }
                    }
                    all.checked = flag;
                }
            }
        }
    </script>
    <input type="checkbox" id="all"> 全选
    <hr>
    <input type="checkbox" id="single"> 苹果 <br>
    <input type="checkbox" id="single"> 苹果 <br>
    <input type="checkbox" id="single"> 苹果 <br>
    <input type="checkbox" id="single"> 苹果 <br>
    <input type="checkbox" id="single"> 苹果 <br>
    <input type="checkbox" id="single">
    苹果
    <button id="del">-</button>
    <input type="text" id="count" value="1">
    <button id="add">+</button>
    <hr>
    <input type="checkbox" id="agree"> 同意条款 <br>
    <input type="button" id="buy" value="购买">
</body>
</html>

效果展示

在这里插入图片描述
欢迎大家提出优化意见

哈虎a

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现简单的购物车页面

实现功能：同意条款才能购买全选功能数量的加减<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫