<!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. js源码-数组中的push()和unshift()方法的源码实现

    人话不多,直接上代码,在代码中解析,不足之处请谅解: push() Array.prototype._push=function(...value){//在Array原型链上添加_push方法 for ...

  2. openstack horizon 学习(3) DataTable

    上一篇中粗略的讲了下openstack中horizon的dashboard和panel的添加,本打算在这章中对有关于pluggable settings中的配置做详细的总结,然放弃了这念头.原因是搞懂 ...

  3. Java-打印杨辉三角

    记录下哈 import java.util.Scanner; public class YangHuiTriangle { public static void main(String[] args) ...

  4. 基于人工智能标记语言 (AIML)和任务型对话系统(Task)的深度智能对话机器人demo

    起因 本demo基于基于人工智能标记语言 (AIML)和开放域问答(WebQA)的深度智能对话模型而来 无意间发现一个基于人工智能标记语言 (AIML)和开放域问答(WebQA)的深度智能对话模型,但 ...

  5. windows server2012搭建邮箱服务器+客户端界面(hmailserver+afterlogic)+批量创建邮箱

    1.简介 由于需要较多邮箱,如果去注册需要很多的手机号码去验证,一个人不可能买一堆的手机号,所以自己搭建一个邮箱服务器可以大批量的创建自己的邮箱账号和收发邮件. 2.安装部署hmailserver 下 ...

  6. MLHPC 2016 | Communication Quantization for Data-parallel Training of Deep Neural Networks

    本文主要研究HPC上进行数据并行训练的可行性.作者首先在HPC上实现了两种通信量化算法(1 Bit SGD以及阈值量化),然后提出了自适应量化算法以解决它们的缺点.此外,发挥出量化算法的性能,作者还自 ...

  7. Mapper代理方式

    MyBatis入门初体验时,使用mapper的方式: 很奇怪,为什么只有interface二没有实现,怎么就可以从数据库中查出准确的数据.其实Mybatis利用了JDK动态代理实现了相应功能,下面详细 ...

  8. 日行一算（Vowel-大小写转换）

    题目 题目描述 solo从小就对英文字母非常感兴趣,尤其是元音字母(a,e,i,o,u,A,E,I,O,U),他在写日记的时候都会把元音字母写成大写的,辅音字母则都写成小写,虽然别人看起来很别扭,但是 ...

  9. SpringBoot 配置Druid数据库连接池

    创建数据库连接池配置类 package com.boot.config; import com.alibaba.druid.pool.DruidDataSource; import com.aliba ...

  10. SpringBoot实现QQ邮件发送

    建项目 创建一个SpringBoot项目 改pom,导入相关依赖 org.springframework.boot spring-boot-starter-parent 2.2.2.RELEASE & ...