jQuery实现全选/反选和批量删除
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全选/反选 批量删除</title>
<script type="text/javascript" src="static/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//全选/全不选
$(function(){
//初始化时候,删除按钮隐藏
$("input[name='Delete'").css("display",'none');
$("#CheckAll").bind("click",function(){
$("input[name='Check[]']").prop("checked",this.checked);
//显示删除按钮
if(this.checked == true){
$("input[name='Delete'").css("display",'block');
}else{
$("input[name='Delete'").css("display",'none');
}
});
//批量删除
$("#Delete").click(function(){
if(confirm('确定要删除所选吗?')){
var checks = $("input[name='Check[]']:checked");
if(checks.length == 0){ alert('未选中任何项！');return false;}
//将获取的值存入数组
var checkData = new Array();
checks.each(function(){
checkData.push($(this).val());
});
alert("选中要删除的id值为:"+checkData);
console.log("选中要删除的id值为:"+checkData);
//提交数据到后台进行删除
}
});
var Alllen = $("input:checkbox").length-1; //总个数减一 3
//当所有复选框选中时,全选勾选;当不是所有复选框选中时,全选不勾选.只要有其中一个复选框选中,删除按钮显示
$("input[name='Check[]']").on("change",function(){
var len = $("input[name='Check[]']:checkbox:checked").length;
if(len==Alllen){
//全选
$('#CheckAll').prop('checked',true);
$("input[name='Delete'").css("display",'block');
}else{
$('#CheckAll').prop('checked',false);//小于3的时候全选框不勾选
if(len>=1){
$("input[name='Delete'").css("display",'block');
}else{
$("input[name='Delete'").css("display",'none'); //等于0的时候删除按钮隐藏
}
}
});
});
//获取table下tbody的tr的行数
function getTrNum(){
var trNum=$("#mytable>tbody").children("tr").length;
retur trNum;
}
//js对input框添加属性,移除属性
<1>添加disabled属性
$('#areaSelect').attr("disabled",true);
$('#areaSelect').attr("disabled","disabled");
<2>移除disabled属性
$('#areaSelect').attr("disabled",false);
$('#areaSelect').removeAttr("disabled");
$('#areaSelect').attr("disabled","");
</script>
</head>
<body>
<div id="con">
<table id="mytable" width="100%" cellspacing="1" cellpadding="0">
<tbody>
<tr align="left">
<td colspan="3">全选/反选</td>
</tr>
<tr align="center">
<th><input id="CheckAll" name='CheckAll' type='checkbox'></th>
<th>ID</th>
<th>Name</th>
<th>Date</th>
</tr>
<tr align="center">
<td><input id='myCheck' name='Check[]' type='checkbox' value="1"></td>
<td>10001</td>
<td>胡静</td>
<td>2015-12-01</td>
</tr>
<tr align="center">
<td><input id='myCheck' name='Check[]' type='checkbox' value="2"></td>
<td>10002</td>
<td>马思纯</td>
<td>2015-12-02</td>
</tr>
<tr align="center">
<td><input id='myCheck' name='Check[]' type='checkbox' value="3"></td>
<td>10003</td>
<td>倪景阳</td>
<td>2015-12-03</td>
</tr>
</tbody>
</table>
<div id="bottom">
<input id="Delete" name="Delete" type="button" value=" 删 除 " class="btn btn-danger radius"/>
</div>
</div>
</body>
</html>
jQuery实现全选/反选和批量删除的更多相关文章
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jquery实现全选/反选功能
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- Jquery 实现添加删除，checkbok 的全选，反全选，但是批量删除没有实现
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title& ...
- jquery 实现全选反选
jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...
- jQuery实现全选反选功能
废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...
- jquery checkbox 全选反选代码只能执行一遍，第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
- jquery实现全选 反选 取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 新版本的jquery checkbox 全选反选代码只能执行一遍，第二次就失败attr与prop区别
$("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...
随机推荐
- Kafka命令清单
一.队列常用命令 #创建topics $ ./kafka-topics.sh --create --zookeeper chenx02:2181 --replication-factor 1 --pa ...
- c time类型详解
linux下存储时间常见的有两种存储方式,一个是从1970年01月01日 0:00:00到现在经过了多少秒,一个是用一个结构来分别存储年月日时分秒的.time_t 这种类型就是用来存储从1970年到现 ...
- opoa介绍
一 定义 One Page, One Application(后面缩写为OPOA,或者1P1A), 含义很简单:一个页面就是一个应用.不再使用iframe, 页面提交不能再使用submit方 ...
- java的四个基本特征
现实生活中的事物被抽象成对象,把具有相同属性和行为的对象被抽象成类,再从具有相同属性和行为的类中抽象出父类. 封装 隐藏对象的属性和实现细节,仅仅对外公开接口. 封装的有优点: 1.便于使用者正确.方 ...
- MapReduce核心 - - - Shuffle
大数据名词(1) -Shuffle Shuffle过程是MapReduce的核心,也被称为奇迹发生的地方.要想理解MapReduce, Shuffle是必须要了解的.我看过很多相关的资料,但每 ...
- http请求的headers详解
关于http请求的headers详解:这里以HTTP1.1为例结合postman返回的信息 1.Server →nginx/1.15.8 A name for the server 这是post ...
- Rarely executed and almost empty if statement drastically reduces performance in C++
Question: Editor's clarification: When this was originally posted, there were two issues: Test perfo ...
- hive的本地安装部署，元数据存储到mysql中
要想使用Hive先要有hadoop集群的支持,使用本地把元数据存储在mysql中. mysql要可以远程连接: 可以设置user表,把localhost改为%,所有可连接.记住删除root其他用户,不 ...
- 每个JavaScript工程师都应懂的33个概念
摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:s ...
- 初学HTML-9
详情和概要标签:利用summary标签来描述概要信息,利用details标签来描述详情信息. 默认情况下是折叠显示. 格式:<details> <summary>概要信息< ...