JQuery实现全选、全不选和反选功能
程序员文章站
2022-10-31 13:22:52
看重点就行了，最后面给一个网页完整的代码 代码实例： 全选： 反选： 全选操作案例： 数据遍历出来： 点击全选： 反选操作案例： 首先选中几个 然后点击反选： 附上完整网页的代码： ......
看重点就行了，最后面给一个网页完整的代码
代码实例：
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>
上一篇： WIFI万能钥匙密码查询接口实例
下一篇： 十大使用PHP框架的理由