<!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>

jq全选、全不选、反选、单删、批量删除的更多相关文章

  1. AJAX实现弹窗显示详情，全选和批量删除

    以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...

  2. PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

  3. ajax全选、全不选、反选、单删/批删

    <meta charset="utf-8"> <?php //链接数据库 $link = mysqli_connect('127.0.0.1','root','r ...

  4. jquery中的全选、反选、全不选和单删、批删

    HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF- ...

  5. Vue-表单验证-全选-反选-删除-批量删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Jq 遍历 全选 全不选 反选

    //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...

  7. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  9. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

随机推荐

  1. 新一代Python包管理工具来了

    1 简介 说起Python的包管理工具,大家第一时间想到的肯定是pip.conda等经典工具.但最近我发现了一款新颖的Python包管理工具--pdm,它受到PEP582(https://www.py ...

  2. JAVA多线程学习十七 - 面试题

    前面针对多线程相关知识点进行了学习,那么我们来来看看常见的面试题: 1. 空中网面试题1 package com.kongzhongwang.interview; import java.util.c ...

  3. 我对JavaWeb中中文URL编码的简单总结

    1.application/x-www-form-urlencoded 它是一种编码类型.当URL地址里包含非西欧字符的字符串时,系统会将这些字符转换成application/x-www-form-u ...

  4. linux 设置connect 超时

    转载请注明来源:https://www.cnblogs.com/hookjc/ 将一个socket 设置成阻塞模式和非阻塞模式,使用fcntl方法,即: 设置成非阻塞模式: 先用fcntl的F_GET ...

  5. Yarn命令列表

    常用命令: 创建项目:yarn init 安装依赖包:yarn == yarn install 添加依赖包:yarn add Yarn命令列表 命令 操作 参数 标签 yarn add 添加依赖包 包 ...

  6. Kubernets-初见

    只是入门文档. 使用 linux 通过 java -jar 方式部署单体架构,war 包丢tomcat. 使用 Docker部署微服务架构. 使用 K8s Pod 进行部署 一个一个 服务 命令 je ...

  7. Servlet版本冲突导致页面404

    入门servlet前先准备好了Tomcat环境以及用Idea打了一个Servlet war包想看看效果,结果发现页面跳转一直报404错误,检查了跳转url,项目结构等情况后,问题依旧没有解决.最后偶然 ...

  8. 书写高质量sql的一些建议

    It's better to light a candle than to curse the darkness 老生常谈的不要使用select * 如果硬要使用select *,那么就请忍受一下以下 ...

  9. win10+redhat8双系统安装（非虚拟机）

    win10+redhat8双系统安装(非虚拟机) 记录这次在原有的win10系统基础上,安装了redhat 8操作系统,过程中也出现了一些状况,百度了许久,许多文章并没有效果,摸爬滚打,有了这一次的记 ...

  10. Zookeeper 提供的API

    上篇介绍了Zookeeper命令行相关的知识,本小作文介绍从另一个维度操作Node相关的内容:Zookeer的API.同样借用Zookeeper应用之一的数据注册与订阅中的案例类比命令行操作,重点介绍 ...