效果图
![](https://i-blog.csdnimg.cn/blog_migrate/f7408d4562feca342f51ec4cf18f6b32.gif)
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>