<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="css/reset.css" rel="stylesheet"/>
<style>
.cart-page{
min-height: 100%;
}
header{
line-height: 50px;
background: #000000;
color: #fff;
font-size: 16px;
text-align: center;
position: relative;
}
.btn-redact{
position: absolute;
right: 15px;
top: 0;
color: #ffffff;
}
li{
margin-bottom: 10px;
padding: 5px 0;
background: #FFFFFF;
border-bottom: 1px solid #e5e5e5;
}
label{
display: block;
}
li .content{
height: 70px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
margin-left: 8px;
}
li .mui-checkbox.mui-left{
padding-left: 58px;
padding-right: 15px;
box-sizing: border-box;
}
li .mui-checkbox.mui-left input{
top: 21px;
}
li button{
width: 30px;
height: 30px;
}
.mui-bar-tab{
line-height: 50px;
}
.mui-bar-tab input{
width: 28px;
height: 28px;
}
.mui-bar-tab .mui-input-row input{
top: 10px;
}
.mui-bar-tab .mui-btn{
position: absolute;
right: 15px;
}
.space-between{
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
}
.btn-box{
text-align: center;
height: 30px;
width: 68px;
}
.btn-box span{
margin: 0 auto;
}
.btn-box .btn{
display: none;
}
.alian {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="cart-page">
<header> 购物车 <p class="btn-redact">完成</p></header>
<ul class="cart-list">
<li>
<div class="mui-input-row mui-checkbox mui-left list-input">
<div class="alian">
<img src="images/icon.png" alt="" width="70" height="70">
<div class="content">
<p>中华人民共和国</p>
<div class="space-between">
<span class="money">500</span>
<p class="alian btn-box">
<button type="button" class="btn">-</button>
<span class="number">1</span>
<button type="button" class="btn">+</button>
</p>
</div>
</div>
</div>
<input name="checkbox1" value="Item 1" type="checkbox" class="input">
</div>
</li>
<li>
<div class="mui-input-row mui-checkbox mui-left list-input">
<div class="alian">
<img src="images/icon.png" alt="" width="70" height="70">
<div class="content">
<p>中华人民共和国</p>
<div class="space-between">
<span class="money">500</span>
<p class="alian btn-box">
<button type="button" class="btn">-</button>
<span class="number">1</span>
<button type="button" class="btn">+</button>
</p>
</div>
</div>
</div>
<input name="checkbox1" value="Item 1" type="checkbox" class="input">
</div>
</li>
</ul>
<div class="mui-bar mui-bar-tab alian">
<div class="mui-input-row mui-checkbox mui-left">
<label>全选</label>
<input name="checkbox1" value="Item 1" type="checkbox" class="check-all">
</div>
<div class="alian">
<span>合计:</span>
<span class="sum">0 </span>
<span class="total">0</span>
</div>
<button type="button" class="mui-btn mui-btn-danger">提交</button>
</div>
</div>
<script type="text/javascript">
var listInput = document.getElementsByClassName("list-input");
var selectInputs = document.getElementsByClassName("input");
var number = document.getElementsByClassName("number");
var btn = document.getElementsByClassName("btn");
var btnRedact = document.getElementsByClassName("btn-redact")[0];
var money = document.getElementsByClassName("money");
var sum = document.getElementsByClassName("sum")[0];
var total = document.getElementsByClassName("total")[0];
var checkAllInputs = document.getElementsByClassName("check-all")[0];
var n2 = 1;
var othercheckbox = 0;
// 点击选择框
for(var i = 0; i < selectInputs.length; i++ ){
selectInputs[i].onclick = function () {
if (this.checked == true) {
othercheckbox++;
} else {
othercheckbox--;
}
if (othercheckbox == selectInputs.length) {
checkAllInputs.checked = true;
} else {
checkAllInputs.checked = false;
}
changeTotal()
}
}
// 全选
checkAllInputs.onclick = function() {
if (this.checked) {
for(var i = 0; i < selectInputs.length; i++ ){
selectInputs[i].checked = true;
}
} else {
for(var i = 0; i < selectInputs.length; i++ ){
selectInputs[i].checked = false;
}
}
}
// 总计价格和数量
function changeTotal() {
var sumNUM = 0
var sumTOTAL =0
for(var i = 0; i < selectInputs.length; i++ ){
if(selectInputs[i].checked) {
sumTOTAL += parseInt(money[i].innerHTML) * parseInt(number[i].innerHTML)
sumNUM += parseInt(number[i].innerHTML)
}
}
total.innerHTML = sumTOTAL;
sum.innerHTML = sumNUM;
}
// 锁定点击的是哪一个list
for (var i =0; i < listInput.length; i++) {
cart(listInput[i])
}
// 点击添加商品数量
function cart(obj) {
var btn = obj.getElementsByClassName("btn");
var listNumber = obj.getElementsByClassName("number")[0];
var listMoney = obj.getElementsByClassName("money")[0];
var n1=parseInt(listNumber.innerHTML);//商品的数量
for (var i =0; i < btn.length; i++) {
btn[i].onclick = function() {
if(this.innerHTML == '+') {
n1++;
} else {
n1--;
}
listNumber.innerHTML = n1 <= 1 ? n1 = 1 : n1;
changeTotal()
}
}
}
// 点击完成
btnRedact.onclick = function() {
if (n2 == 1) {
this.innerHTML = '编辑';
for (var i = 0; i < btn.length; i++) {
btn[i].style.display = 'block';
}
n2 = 2
} else {
this.innerHTML = '完成';
for (var i = 0; i < btn.length; i++) {
btn[i].style.display = 'none';
}
n2 = 1
}
}
</script>
</body>
</html>