<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现