2001010134
/
RaoYing


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<!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>
    <link rel="stylesheet" type="text/css" href="css/CartCss.css">
</head>
<body>
    <form action="ShoppingCart.html" method="get">
        <div class="Store">
            <a id="lable">
                <input type="checkbox">
                <div id="StoreIcon">
                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
                </div>
                <h3>StoreA</h3>
            </a>
            <div class="goods">
                <input name="seleceed" type="checkbox">
                <div id="GoodsIcon">
                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
                </div>
                <div id="exp">
                    <h3>GoodsA</h3>
                    <p>info & selected</p>
                    <h4>20</h4>
                    <div id="count">
                        <div>-</div>
                        <input name="count" type="text">
                        <div>+</div>
                    </div>
                </div>
            </div>
        </div>
    
    
        <div class="Store">
            <a id="lable">
                <input type="checkbox">
                <div id="StoreIcon">
                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
                </div>
                <h3>StoreB</h3>
            </a>
            <div class="goods">
                <input name="selected" type="checkbox">
                <div id="GoodsIcon">
                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
                </div>
                <div id="exp">
                    <h3>GoodsB</h3>
                    <p>info & selected</p>
                    <h4>20</h4>
                    <div id="count">
                        <div>-</div>
                        <input name="count" type="text">
                        <div>+</div>
                    </div>
                </div>
            </div>
            <div class="goods">
                <input name="selected" type="checkbox">
                <div id="GoodsIcon">
                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
                </div>
                <div id="exp">
                    <h3>GoodsC</h3>
                    <p>info & selected</p>
                    <h4>20</h4>
                    <div id="count">
                        <div>-</div>
                        <input name="count" type="text">
                        <div>+</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="BottomBar">
            <input type="submit" name="submit" value="Delete">
            <input type="submit" name="submit" value="Settle">
        </div>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $("form>div.Store>div.goods>div#exp>div#count>div").click(function()
        {
            if(this.innerHTML == "-")
            {
                let text = $(this).next()[0];
                let num = Number.parseInt(text.value);
                // console.dir(num);
                if(num.toString() == "NaN") num = 0;
                else num = Math.max(0,--num);
                text.value = num;
            }
            else
            if(this.innerHTML == "+")
            {
                let text = $(this).prev()[0];
                let num = Number.parseInt(text.value);
                // console.dir(num);
                if(num.toString() == "NaN") num = 1;
                else num = Math.max(0,++num);
                text.value = num;
            }
        });
        $("form>div.Store>a#lable>input").change(function()
        {
            let items = $(this).parent().parent().children("div.goods").children("input");
            // console.dir(items);
            for(let i = 0; i < items.length; ++i)
            {
                items[i].checked = this.checked;
            }
        });
        $("form>div.Store>div.goods>input").change(function()
        {
            let lableChecker = $(this).parent().parent().children("a#lable").children("input");
            if(this.checked)
            {
                let otherGoods = $(this).parent().parent().children("div.goods").children("input").not(this);
                for(let i = 0; i < otherGoods.length; ++i)
                {
                    // console.dir(otherGoods[i].checked);
                    if(!otherGoods[i].checked)
                    {
                        return;
                    }
                }
                lableChecker.prop("checked", true);
            }
            else
            {
                lableChecker.prop("checked", false);
            }
        })
        $("form>div.Store>div.goods>div#exp>div#count>input").focusout(function()
        {
            let num = Number.parseInt(this.value);
            if(num.toString() == "NaN") num = 0;
            this.value = num;
        }).keyup(function()
        {
            let num = Number.parseInt(this.value);
            if(num.toString() == "NaN") num = 0;
            this.value = num;
        }).keydown(function()
        {
            let num = Number.parseInt(this.value);
            if(num.toString() == "NaN") num = 0;
            this.value = num;
        });
        $("form>div#BottomBar>input[type='submit']").click(function()
        {
            let counts = $("form>div#Store>div.goods>div#exp>div#count>input");
            for (let index = 0; index < counts.length; index++) {
                let num = Number.parseInt( counts[index].value);
                if(num.toString() == "NaN") num = 0;
                counts[index].value = num;
            }
        });
    </script>
</body>
</html>