<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/Bootstrap4.css"/>
<form action="">
<table border="" cellspacing="" cellpadding=""width="800px">
<tr>
<th>选择</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>电车</th>
<th>9.9</th>
<th><button type="button"class="jian">-</button>
<span>1</span>
<button type="button" id="jia">+</button></th>
<th>9.9</th>
<th><button type="button"onclick="fun3(this)">删除</button></th>
</tr>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>电车</th>
<th>9.9</th>
<th><button type="button" class="jian">-</button>
<span>1</span>
<button type="button"id="jia">+</button></th>
<th>9.9</th>
<th><button type="button"onclick="fun3(this)">删除</button></th>
</tr>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>电车</th>
<th>9.9</th>
<th><button type="button"class="jian">-</button>
<span>1</span>
<button type="button" id="jia">+</button></th>
<th>9.9</th>
<th><button type="button"onclick="fun3(this)">删除</button></th>
</tr>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>电车</th>
<th>9.9</th>
<th><button type="button"class="jian">-</button>
<span>1</span>
<button type="button"id="jia">+</button></th>
<th>9.9</th>
<th><button type="button"onclick="fun3(this)">删除</button></th>
</tr>
</table>
<button type="button"class="btn btn-primary all"onclick="fun()">全选</button>
<button type="button" class="btn btn-danger allno"onclick="fun1()">全不选</button>
<button type="button" class="btn btn-danger allf"onclick="fun2()">反选</button>
<button type="button" class="btn btn-danger allw"onclick="fun4()">批量删除</button>
</form>
</body>
</html>
<script src="new_file.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//-号
$('.jian').click(function(){
var aww=$(this).next().text();
aww--;
var last=aww--<=1 ? 1 : aww--;//最终的数量
$(this).next().text(last)
var dj=$(this).parent().prev().text()
var xj=last*dj
var xj=$(this).parent().next().text(xj.toFixed(1))
})
//+号
$('#jia').click(function(){
var aqq=$(this).prev().text();
aqq++;
$(this).prev().text(aqq);//最终的数量
var dj=$(this).parent().prev().text();
var xj=aqq*dj
var xj=$(this).parent().next().text(xj.toFixed(1))
})
//批量删除
function fun4(){
var aqq=$(':checkbox:checked')
for(var i=0;i<aqq.length;i++){
aqq[i].parentNode.parentNode.remove()
}
}
//这是删除
function fun3(tag){
tag.parentNode.parentNode.remove()
}
//全选
// $(".all").click(function(){
// var check=$(":checkbox")
// $(check).each(function(k,v){
// v['checked']=true
// })
// }
//这一步是反选
function fun2(){
var add=$(":checkbox")
for(var i=0;i<add.length;i++){
if(add[i]["checked"]){
add[i]["checked"]=false
}else{
add[i]['checked']=true
}
}
}
//这一步是全选
function fun(){
var add=$(":checkbox")
for(var i=1;i<add.length;i++){
add[i]["checked"]=true
}
}
//这一步是全不选
function fun1(){
var add=$(":checkbox")
for(var i=0;i<add.length;i++){
add[i]["checked"]=false
}
}
</script>
