174 lines
7.7 KiB
HTML
174 lines
7.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head lang="en">
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>购物车</title>
|
|||
|
|
<link rel="stylesheet" href="../../css/layui.css">
|
|||
|
|
<link rel="stylesheet" href="../../css/logshoppingcar/shopcar2.css">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<section>
|
|||
|
|
<div class="content">
|
|||
|
|
<!-- <div class="logo">
|
|||
|
|
<img src=""><span onclick="close_plan();">关闭</span>
|
|||
|
|
</div> -->
|
|||
|
|
<div class="whole">
|
|||
|
|
|
|||
|
|
<div class="all">
|
|||
|
|
<h2>全部商品(20)</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="cartList" id="cartList">
|
|||
|
|
<ul class="whoil">
|
|||
|
|
<li> <input type="checkbox" id="checkall">
|
|||
|
|
<label for="value1">全选</label>
|
|||
|
|
</li>
|
|||
|
|
<li>商品</li>
|
|||
|
|
<li></li>
|
|||
|
|
<li>单价</li>
|
|||
|
|
<li>数量</li>
|
|||
|
|
<li>小计</li>
|
|||
|
|
<li>操作</li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li><input type="checkbox" name="arr[]" value="1">
|
|||
|
|
<label for="value1"></label>
|
|||
|
|
<img src="../../img/images/1-1.png"></li>
|
|||
|
|
<li>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</li>
|
|||
|
|
<li></li>
|
|||
|
|
<li>x3</li>
|
|||
|
|
<li>¥<input type="text" name="price" value="1688.00" disabled="true"></li>
|
|||
|
|
<li>
|
|||
|
|
<input type="button" name="minus" value="-" onclick="minus(0);" style="width: 15px;">
|
|||
|
|
<input type="text" name="amount" value="1" style="text-align: center;width: 40px;">
|
|||
|
|
<input type="button" name="plus" value="+" onclick="plus(0);" style="width: 15px;">
|
|||
|
|
</li>
|
|||
|
|
<li id="price0">¥1688.00</li>
|
|||
|
|
<li>
|
|||
|
|
|
|||
|
|
<p onclick="del(0);">删除</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li><input type="checkbox" name="arr[]" value="1">
|
|||
|
|
<label for="value1"></label>
|
|||
|
|
<img src="../../img/images/1-1.png"></li>
|
|||
|
|
<li>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</li>
|
|||
|
|
<li></li>
|
|||
|
|
<li>x3</li>
|
|||
|
|
<li>¥<input type="text" name="price" value="18.00" disabled="true"></li>
|
|||
|
|
<li>
|
|||
|
|
<input type="button" name="minus" value="-" onclick="minus(0);" style="width: 15px;">
|
|||
|
|
<input type="text" name="amount" value="1" style="text-align: center;width: 40px;">
|
|||
|
|
<input type="button" name="plus" value="+" onclick="plus(0);" style="width: 15px;">
|
|||
|
|
</li>
|
|||
|
|
<li id="price0">¥18.00</li>
|
|||
|
|
<li>
|
|||
|
|
|
|||
|
|
<p onclick="del(0);">删除</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<ol>
|
|||
|
|
<!-- <li>
|
|||
|
|
<input type="checkbox" id="checkall">
|
|||
|
|
<label for="value1">全选/取消</label>
|
|||
|
|
</li> -->
|
|||
|
|
<li id="totalPrice">商品总计：<span></span></li>
|
|||
|
|
<li><span onclick="accounts();">结 算</span></li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div style="display:none;"></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<script>
|
|||
|
|
$(function () {
|
|||
|
|
/*全选按钮状态显示判断*/
|
|||
|
|
$("#checklist").find("input[type='checkbox']").click(function () {
|
|||
|
|
/*初始化选择为TURE*/
|
|||
|
|
$("#checkall")[0].checked = true;
|
|||
|
|
/*获取未选中的*/
|
|||
|
|
var nocheckedList = new Array();
|
|||
|
|
$("#checklist").find('input:not(:checked)').each(function () {
|
|||
|
|
nocheckedList.push($(this).val());
|
|||
|
|
});
|
|||
|
|
/*状态显示*/
|
|||
|
|
if (nocheckedList.length == $("#checklist").find('input').length) {
|
|||
|
|
$("#checkall")[0].checked = false;
|
|||
|
|
$("#checkall")[0].indeterminate = false;
|
|||
|
|
} else if (nocheckedList.length) {
|
|||
|
|
$("#checkall")[0].indeterminate = true;
|
|||
|
|
} else {
|
|||
|
|
$("#checkall")[0].indeterminate = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 全选/取消
|
|||
|
|
$("#checkall").click(function () {
|
|||
|
|
// alert(this.checked);
|
|||
|
|
if ($(this).is(':checked')) {
|
|||
|
|
$("#checklist").find('input').each(function () {
|
|||
|
|
$(this).prop("checked", true);
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
$("#checklist").find('input').each(function () {
|
|||
|
|
$(this).removeAttr("checked", false);
|
|||
|
|
$(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
//减
|
|||
|
|
function minus(num) {
|
|||
|
|
var prices = document.getElementsByName("price")[num].value;
|
|||
|
|
var count = parseInt(document.getElementsByName("amount")[num].value) - 1;
|
|||
|
|
if (count < 1) {
|
|||
|
|
alert("不能再减了，再减就没有啦！");
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
document.getElementsByName("amount")[num].value = count;
|
|||
|
|
var totals = parseFloat(prices * count);
|
|||
|
|
document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);//.toFixed(2)表示四舍五入，取2位小数点
|
|||
|
|
total();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//增
|
|||
|
|
function plus(num) {
|
|||
|
|
var prices = document.getElementsByName("price")[num].value;
|
|||
|
|
var count = parseInt(document.getElementsByName("amount")[num].value) + 1;
|
|||
|
|
document.getElementsByName("amount")[num].value = count;
|
|||
|
|
var totals = parseFloat(prices * count);
|
|||
|
|
document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);
|
|||
|
|
total();
|
|||
|
|
}
|
|||
|
|
//计算总额
|
|||
|
|
function total() {
|
|||
|
|
var prices = document.getElementsByName("price");
|
|||
|
|
var count = document.getElementsByName("amount");
|
|||
|
|
var sum = 0;
|
|||
|
|
for (var i = 0; i < prices.length; i++) {
|
|||
|
|
sum += prices[i].value * count[i].value;
|
|||
|
|
}
|
|||
|
|
document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2);
|
|||
|
|
}
|
|||
|
|
//结算
|
|||
|
|
function accounts() {
|
|||
|
|
var obj = document.getElementById("cartList").nextElementSibling;//.nextElementSibling表示下一个同辈元素
|
|||
|
|
obj.style.display = "block";
|
|||
|
|
var str = "您本次购买的商品信息好下：";
|
|||
|
|
str += "<br/>白岩松：白说：" + document.getElementById("price0").innerHTML;
|
|||
|
|
str += "<br/>岛上书店：" + document.getElementById("price1").innerHTML;
|
|||
|
|
str += "<br/>商品总计：" + document.getElementById("totalPrice").innerHTML;
|
|||
|
|
obj.innerHTML = str;
|
|||
|
|
}
|
|||
|
|
//删除
|
|||
|
|
function del(num) {
|
|||
|
|
var ocartList = document.getElementById("cartList");
|
|||
|
|
var delObj = document.getElementsByName("price")[num].parentNode.parentNode;
|
|||
|
|
ocartList.removeChild(delObj);
|
|||
|
|
total();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|