jq全选、全不选、反选、单删、批量删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/Bootstrap4.css" />
</head>
<body>
<div style="width: 999px;margin: 10px auto;">
<table class="table">
<thead class="thead-dark">
<tr>
<th>选择</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox"></th>
<th>充气欣宇</th>
<th>9.9</th>
<th>
<button type="button" class="btn btn-primary jian">-</button>
<span>1</span>
<button type="button" class="btn btn-primary jia">+</button>
</th>
<th>9.9</th>
<th><button class="btn btn-danger">删除</button></th>
</tr>
<tr>
<th><input type="checkbox"></th>
<th>充气欣宇Ⅱ</th>
<th>19.9</th>
<th>
<button type="button" class="btn btn-primary jian">-</button>
<span>1</span>
<button type="button" class="btn btn-primary jia">+</button>
</th>
<th>19.9</th>
<th><button class="btn btn-danger">删除</button></th>
</tr>
<tr>
<th><input type="checkbox"></th>
<th>充气欣宇Ⅲ</th>
<th>29.9</th>
<th>
<button type="button" class="btn btn-primary jian">-</button>
<span>1</span>
<button type="button" class="btn btn-primary jia">+</button>
</th>
<th>29.9</th>
<th><button class="btn btn-danger">删除</button></th>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-outline-primary all">全选</button>
<button type="button" class="btn btn-outline-primary alln">全不选</button>
<button type="button" class="btn btn-outline-primary allf">反选</button>
<button type="button" class="btn btn-outline-danger delall">批量删除</button>
</div>
</body>
</html>
<script src="js/1.js"></script>
<script>
//减号
$('.jian').click(function(){
//获取原来的数量
var num = $(this).next().text();
var last_num = num-- <=1 ? 1 : num--;
//获取单价
var price = $(this).parent().prev().text();
//最终的价格
var last_price = price*last_num
$(this).next().text(last_num)
//替换小计
$(this).parent().next().text(last_price.toFixed(2))
})
//加号
$('.jia').click(function(){
//获取原来的数量
var num = $(this).prev().text();
//数量+1
num++;
//获取单价
var price = $(this).parent().prev().text();
//最终的价格
var last_price = price*num
//替换数量
$(this).prev().text(num)
//替换小计
$(this).parent().next().text(last_price.toFixed(2))
})
//批量删除
$('.delall').click(function(){
if(confirm('确定要删除吗?')){
//获取选中的多选框
var checks = $(':checkbox:checked');
$(checks).each(function(k,v){
$(v).parents('tr').remove();
})
}
})
//单个删除
$('.btn-danger').click(function(){
if(confirm('确定要删除吗?')){
$(this).parents('tr').remove();
}
})
//全选
$('.all').click(function(){
//获取所有的复选框
var check = $(':checkbox');
$(check).each(function(k,v){
v['checked'] = true
})
})
//全不选
$('.alln').click(function(){
//获取所有的复选框
var check = $(':checkbox');
$(check).each(function(k,v){
v['checked'] = false
})
})
//反选
$('.allf').click(function(){
//获取所有的复选框
var check = $(':checkbox');
$(check).each(function(k,v){
if(v['checked']){
v['checked'] = false
}else{
v['checked'] = true
}
})
})
</script>
