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> |