176 lines
7.1 KiB
HTML
176 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>购物车</title>
|
||
<link rel="stylesheet" href="../../css/layui.css">
|
||
<link rel="stylesheet" href="../../css/logshoppingcar/shopcar.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<section>
|
||
<div class="whole">
|
||
<div class="whole-1">
|
||
<div class="all">
|
||
<h2>全部商品(20)</h2>
|
||
</div>
|
||
<!-- 选择 -->
|
||
<div class="opt cartList" id="cartList">
|
||
<ul>
|
||
<li class="optall">
|
||
<table>
|
||
<th>
|
||
<input type="checkbox" id="checkall">
|
||
<label for="value1">全选</label>
|
||
<span>商品</span>
|
||
</th>
|
||
<th>单价</th>
|
||
<th>数量</th>
|
||
<th>小计</th>
|
||
<th>操作</th>
|
||
</table>
|
||
</li>
|
||
<li></li>
|
||
<ul id="checklist">
|
||
<li class="among">
|
||
<table>
|
||
<th> <li><input type="checkbox" name="arr[]" value="1" class="box1">
|
||
<label for="value1"><img src="../../img/images/1-1.png" alt=""></label></li>
|
||
</th>
|
||
<th><li>
|
||
竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
|
||
</li></th>
|
||
<th>
|
||
<li>x3</li>
|
||
</th>
|
||
<th>
|
||
<li>￥<input type="text" name="price" value="1688.00" disabled="true"></li>
|
||
</th>
|
||
<th>
|
||
<li>
|
||
<input type="button" name="minus" value="-" onclick="minus(0);">
|
||
<input type="text" name="amount" value="1">
|
||
<input type="button" name="add" value="+" onclick="add(0);">
|
||
</li>
|
||
</th>
|
||
<th>
|
||
<li id="price0">￥564.6</li>
|
||
</th>
|
||
<th>
|
||
<li>
|
||
<p onclick="del(0);">删除</p>
|
||
</li>
|
||
</th>
|
||
</table>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div style="display:none;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</body>
|
||
<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
|
||
<script type="text/javascript">
|
||
|
||
//计算总额
|
||
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();
|
||
}
|
||
//增
|
||
function add(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 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 () {
|
||
// /*全选按钮状态显示判断*/
|
||
// $("#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()
|
||
// });
|
||
// }
|
||
// });
|
||
// });
|
||
|
||
|
||
|
||
|
||
</script>
|
||
|
||
</html> |