JS 简单购物车全选 单选 结算案例 笔记

效果图

HTML部分

<div id="box">
			<ul class="tab">
				<li><input type="checkbox" name="" id="" value="" class="checkall" />全选</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>合计</li>
			</ul>
			<ul class="tab-content">
				<li><input type="checkbox" name="" id="" value="" class="single" /></li>
				<li>炫龙笔记本</li>
				<li class="price">5299</li>
				<li>
					<button type="button" class="addition">+</button>
					<input type="text" name="" id="" value="1" class="texto" />
					<button type="button" class="subtract">-</button>
				</li>
				<li class="sumlislis">5299</li>
			</ul>

			<ul class="tab-content">
				<li><input type="checkbox" name="" id="" value="" class="single" /></li>
				<li>炫龙笔记本</li>
				<li class="price">5799</li>
				<li>
					<button type="button" class="addition">+</button>
					<input type="text" name="" id="" value="1" class="texto" />
					<button type="button" class="subtract">-</button>
				</li>
				<li class="sumlislis">5799</li>
			</ul>
			<ul class="tab-content">
				<li><input type="checkbox" name="" id="" value="" class="single" /></li>
				<li>炫龙笔记本</li>
				<li class="price">4499</li>
				<li>
					<button type="button" class="addition">+</button>
					<input type="text" name="" id="" value="1" class="texto" />
					<button type="button" class="subtract">-</button>
				</li>
				<li class="sumlislis">4499</li>
			</ul>
			<div class="tot">
				总计<span></span>
			</div>
		</div>

JS部分 

<script type="text/javascript">
			//获取总表单数量
			var conent = document.querySelectorAll('.tab-content')
			//获取单价
			var price = document.querySelectorAll('.price')
			//获取加号
			var addition = document.querySelectorAll('.addition')
			//获取减号
			var subtract = document.querySelectorAll('.subtract')
			//循环添加自定义属性
			var text = document.querySelectorAll('.texto')
			//获取小计
			var sumlis = document.querySelectorAll('.sumlislis')
			//表单元素
			//获取合计总金额
			var total = document.querySelector('.tot')
			var spintext = total.querySelector('span')
			//获取单选
			var single = document.querySelectorAll('.single')
			//获取多选
			var checkall = document.querySelector('.checkall')
			for (var i = 0; i < conent.length; i++) {
				price[i].setAttribute('pric', i)
				addition[i].setAttribute('addindex', i)
				subtract[i].setAttribute('subindex', i)
				//加
				addition[i].addEventListener('click', function() {
					var textindex = this.getAttribute('addindex')
					//当前变为true
					single[textindex].checked = true
					//保存返回值
					var boold = dx()
					//单击事件 先检查是否有未选中的
					if (boold == false) {
						checkall.checked = false
					}
					//获取当前表格内数值
					var textnumber = parseInt(text[textindex].value)
					var sum = textnumber + 1
					text[textindex].value = sum
					var pric = parseInt(price[textindex].innerText)
					sumlis[textindex].innerText = pric * sum
					//调用求和事件
					total()
				})
				//减
				subtract[i].addEventListener('click', function() {
					var textindex = this.getAttribute('subindex')
					var textnumber = parseInt(text[textindex].value)
					var boold = dx()
					//单击事件 先检查是否有未选中的
					if (boold == false) {
						checkall.checked = false
					}
					var sum = textnumber
					sum = textnumber - 1
					text[textindex].value = sum
					var pric = parseInt(price[textindex].innerText)
					sumlis[textindex].innerText = pric * sum
					total()
					single[textindex].checked = true
					if (sum <= 0) {
						single[textindex].checked = false
						checkall.checked = false
						text[textindex].value = 0
						total()
						sumlis[textindex].innerText = 0
					}

				})
				//全选
				checkall.addEventListener('click', function() {
					this.checked = this.checked
					for (var i = 0; i < single.length; i++) {
						single[i].checked = this.checked
					}
					total()
				})
				//单选
				for (var a = 0; a < single.length; a++) {
					single[a].addEventListener('click', dx)
				}

				function dx() {
					var boo = this.checked
					this.checked = boo
					total()
					var flag = true
					for (var a = 0; a < single.length; a++) {
						if (single[a].checked != true) {
							flag = false
						}
						checkall.checked = flag
					}
					return flag
				}
				//计算总金额
				function total() {
					var totalsum = 0
					for (var i = 0; i < conent.length; i++) {
						if (single[i].checked == true) {
							totalsum += parseInt(sumlis[i].innerText)
						}
					}
					spintext.innerText = totalsum
				}
			}
		</script>