JQuery实现全选、全不选和反选功能
看重点就行了，最后面给一个网页完整的代码
代码实例：
function selectStu() {
$.ajax("StuList",{
type:"post",
data:{"method":"finList"},
success:function(data){
//循环遍历
$.each(data,function(index,obj){
$("#tab").append(
"<tr>"+
//首先从数据库读出数据 因为数据库主键是学号，而且对学号进行操作
//在input里面的值value添加数据中的学号
"<td><input name='stu' value='"+obj.stuNo+"' type='checkbox' /></td>"+
"<td>"+obj.stuNo+"</td>"+
"<td>"+obj.stuName+"</td>"+
"<td>"+obj.stuSex+"</td>"+
"<td>"+obj.stuAge+"</td>"+
"<td>"+obj.score+"</td>"+
"<td>"+obj.className+"</td>"+
"</tr>"
);
})
}
})
}
全选：
//这个方法可以替代toggle() toggle()在jQuery 1.9中已经移除
//两个函数的绑定
var i=0;
//全选
$("#selectAll").on("click",function(){
if(i==0){
//把所有复选框选中
$("#tab td :checkbox").prop("checked", true);
i=1;
}else{
$("#tab td :checkbox").prop("checked", false);
i=0;
} });
反选：
//反选
$("#ReverseSelect").on("click",function(){ $("#tab td :checkbox").each(function(){
//遍历所有复选框，然后取值进行 !非操作
$(this).prop("checked", !$(this).prop("checked"));
})
});
全选操作案例：
数据遍历出来：
点击全选：
反选操作案例：
首先选中几个
然后点击反选：
附上完整网页的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body> <h1>学员信息查询管理系统</h1>
条件：<p><input id="txt_search" type="text" /> <input id="btn_search" type="button" value="模糊查询"/>
<input type="button" id="del_btn" value="删除"/> <table id="tab" border="1">
<tr>
<th><input type="checkbox" id="selectAll"/>全选 <input type="checkbox" id="ReverseSelect"/>反选</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>成绩</th>
<th>班级</th>
</tr>
</table> <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(selectStu())
function selectStu() {
$.ajax("StuList",{
type:"post",
data:{"method":"finList"},
success:function(data){
//循环遍历
$.each(data,function(index,obj){
$("#tab").append(
"<tr>"+
//首先从数据库读出数据 因为数据库主键是学号，而且对学号进行操作
//在input里面的值value添加数据中的学号
"<td><input name='stu' value='"+obj.stuNo+"' type='checkbox' /></td>"+
"<td>"+obj.stuNo+"</td>"+
"<td>"+obj.stuName+"</td>"+
"<td>"+obj.stuSex+"</td>"+
"<td>"+obj.stuAge+"</td>"+
"<td>"+obj.score+"</td>"+
"<td>"+obj.className+"</td>"+
"</tr>"
);
})
}
})
}
$(function(){
$("#btn_search").on("click",function(){
var text=$("#txt_search").val();
$("#tab tr").not(":first").remove();
$.ajax("StuList",{
type:"post",
data:{"method":"FuzzyQuery","likeInfo":text},
success:function(data){
$.each(data,function(index,obj){
$("#tab").append(
"<tr>"+
"<td><input name='stu' type='checkbox' value='"+obj.stuNo+"' /></td>"+
"<td>"+obj.stuNo+"</td>"+
"<td>"+obj.stuName+"</td>"+
"<td>"+obj.stuSex+"</td>"+
"<td>"+obj.stuAge+"</td>"+
"<td>"+obj.score+"</td>"+
"<td>"+obj.className+"</td>"+
"</tr>"
);
})
}
})
});
//这个方法可以替代toggle() toggle()在jQuery 1.9中已经移除
//两个函数的绑定
var i=0;
//全选
$("#selectAll").on("click",function(){
if(i==0){
//把所有复选框选中
$("#tab td :checkbox").prop("checked", true);
i=1;
}else{
$("#tab td :checkbox").prop("checked", false);
i=0;
} }); //反选
$("#ReverseSelect").on("click",function(){ $("#tab td :checkbox").each(function(){
//遍历所有复选框，然后取值进行 !非操作
$(this).prop("checked", !$(this).prop("checked"));
})
}); $("#del_btn").on("click",function(){
var arr=new Array();
$('#tab input:checkbox[name=stu]:checked').each(function(i){
arr[i] = $(this).val();
});
var vals = arr.join(","); $.ajax("StuList",{
type:"post",
data:{"method":"deleteStu","delId":vals},
success:function(data){
if(data==-500){
alert("删除失败！");
}else{
alert("删除成功\n"+data+"条");
$("#tab tr").not(":first").remove();
selectStu();
}
}
});
}) })
</script>
</body>
</html>
JQuery实现全选、全不选和反选功能的更多相关文章
- jQuery/javascript实现全选全不选
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- jQuery实现Checkbox中项目开发全选全不选的使用
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jquery之全选全不选
<input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...
- 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...
- 用jQuery实现全选-全不选-反选的功能
临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...
- jQuery实现全选、不选和反选功能
jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...
- jquery实现全选、不选、反选的两种方法
在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...
随机推荐
- python scrapy 爬取西刺代理ip(一基础篇)（ubuntu环境下） -赖大大
第一步:环境搭建 1.python2 或 python3 2.用pip安装下载scrapy框架 具体就自行百度了,主要内容不是在这. 第二步:创建scrapy(简单介绍) 1.Creating a p ...
- jdk8 分隔字符串最新方法
//已字符串分隔方法最新 方法 StringJoiner stringJoiner=new StringJoiner(","); stringJoiner.add("a& ...
- ES6躬行记（7）——代码模块化
在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载.而自从ES6引入了模块 ...
- 数据库性能测试：sysbench用法详解
1.简介和安装 sysbench是一个很不错的数据库性能测试工具. 官方站点:https://github.com/akopytov/sysbench/ rpm包下载:https://packagec ...
- 翻译：DECLARE Variable（已提交到MariaDB官方手册）
本文为mariadb官方手册:DECLARE Variable的译文. 原文:https://mariadb.com/kb/en/library/declare-variable/我提交到MariaD ...
- 大话DI依赖注入+IOC控制反转（二） 之 浅析.Net Core中的DI与IOC
转发时请注明原创作者及地址,否则追究责任.原创:alunchen 在上一篇文章中,我们聊了很多关于定义的方面,比较孤燥,下面我们结合.Net Core聊一下依赖注入&控制反转. 三种对象生 ...
- [转]NET Core静态文件的缓存方式
本文转自:https://www.cnblogs.com/Leo_wl/p/6059349.html 阅读目录 NET Core静态文件的缓存方式 一.前言 二.StaticFileMiddlewar ...
- [转]php hash_pbkdf2 和 node.js crypto.pbkdf2
http://php.net/manual/en/function.hash-pbkdf2.php https://nodejs.org/api/crypto.html#crypto_crypto_p ...
- .NET 单元测试的利剑——模拟框架Moq（简述篇）
.NET 单元测试的利剑--模拟框架Moq 前言 这篇文章是翻译文,因为通过自己参与的项目,越发觉得单元测试的重要性,特别是当跟业务数据打交道的时候的,Moq就如雪中送炭,所以想学习这个框架,就从这篇 ...
- Python中的特殊属性与方法
模块的特殊属性 __doc__ 模块的说明文档 __all__ 指明模块希望被使用的属性.类和方法 __file__ 模块所在路径 类的特殊属性 __slots__ 限制类的实例允许添加的属性,是一个 ...