<!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. Filter、Listener

    Filter(过滤器) 概念: 对请求参数.请求头以及响应参数进行过滤.一般用于完成通用的操作,如:登录验证.统一编码处理.敏感字符过滤.... 代码: public class FilterDemo ...

  2. JVM学习十四 - （复习）类文件结构

    类文件结构 JVM 的"无关性" 谈论 JVM 的无关性,主要有以下两个: 平台无关性:任何操作系统都能运行 Java 代码 语言无关性: JVM 能运行除 Java 以外的其他代 ...

  3. 测试人员学Java入门指南

    目标读者 本指南特别适合有Python基础的同学学习Java入门,对于没有任何编程经验的同学可能会存在困难. 为什么测试人员要学Java 选择Java,应该不错.TesterHome测试论坛知名大佬基 ...

  4. 用Java实现在123456789中随机插入+或者-，使表达式的结果为100

    这里我的思路是暴力算法.就是不断试错,不限循环次数,直到找到正确的情况为止. 通过走随机,不断控制在123456789中添加+或者-,再通过正则表达式筛选出所有的数字(包含正负),转换为Integer ...

  5. 利用Monkey进行APP测试

    APP测试策略 功能测试 安装.卸载测试 升级测试(跨版本) 数据丢失 版本兼容 业务逻辑测试 UI测试 异常测试 适配测试 软件 兼容性测试 硬件 性能测试 效率测试 启动时间 响应时间 页面流畅度 ...

  6. HTML基础笔记整理

    「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实,更重要的是可以让自己少走弯路.有人说:"再次翻开笔记是什么感觉",我的回答是:"初恋般的感觉". ...

  7. find 查询命令 & 正则表达式

    今日内容 find 正则表达式 Linux 三剑客之 grep 内容详细 一.find 按名称或属性查询文件 按名称查询 find [查找目录] [参数] [] 通配符 : * 表示匹配多个字符 ? ...

  8. Solution -「ARC 124E」Pass to Next

    \(\mathcal{Description}\)   Link.   有 \(n\) 个人站成一个环,初始时第 \(i\) 个人手里有 \(a_i\) 个球.第 \(i\) 个人可以将自己手中任意数 ...

  9. 利用iptables做网络转发

    常见的网络拓扑图结构如下: 但是内网服务器偶尔有上网需求,比如yum工具,wget文件.而我们又不能让重要业务直接暴露在公网上. 好用的安全策略有:三层交换机.路由器做nat映射,防火墙做安全策略. ...

  10. for循环例子

    代码 点击查看[ForTest.java]代码 //package com.d; import java.util.Scanner; /** * For循环例子 * @date: 2022.2.24 ...