|
|
@@ -0,0 +1,164 @@
|
|
|
+<!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/testingCss.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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
