JQuery實作選擇的功能 ：全選、全不選、反選（程式碼）
- 不言原創
- 2018-07-27 13:42:542618瀏覽
這篇文章跟大家介紹的文章內容是關於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"));
})
});
全選操作案例：
資料遍歷出來：
#點選全選：
反選操作案例：
先選取幾個
然後點選反選：
附上完整網頁的程式碼：
#76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7Insert title here6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
4a249f0d628e2318394fd9b75b4636b1学员信息查询管理系统473f0a7621bec819994bb5020d29372a
条件：e388a4556c0f65e1904146cc1a846bee84f4cbeb6f1866ee05263a5e42de5e6c 913ec5f476985b928dae59a563a42faf
654e1af9ac0e071c5b283fc0eb0ffb5f
5a36c85283c5a4e69ef0367e268ee9bc
a34de1251f0d9fe1e645927f19a896e8
b4d429308760b6c2d20d6300079ed38e4284d11061013144cfe4764bdb783d68全选 964a42f7f9923b1cd5be81f0ed0582a6反选01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e学号01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e姓名01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e性别01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e年龄01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e成绩01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e班级01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
a3a75d4b5dcc412f59256ecf95ef402e2cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
$(selectStu())
function selectStu() {
$.ajax("StuList",{
type:"post",
data:{"method":"finList"},
success:function(data){
//循环遍历
$.each(data,function(index,obj){
$("#tab").append(
"a34de1251f0d9fe1e645927f19a896e8"+
//首先从数据库读出数据 因为数据库主键是学号，而且对学号进行操作
//在input里面的值value添加数据中的学号
"b6c5a531a458a2e790c1fd6421739d1cfa28b53838b441a1855628b0316048aeb90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.stuNo+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.stuName+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.stuSex+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.stuAge+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.score+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.className+"b90dd5946f0946207856a8a37f441edf"+
"fd273fcf5bcad3dfdad3c41bd81ad3e5"
);
})
}
})
}
$(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(
"a34de1251f0d9fe1e645927f19a896e8"+
"b6c5a531a458a2e790c1fd6421739d1cea6cb8056e57e297f29b917bdd892f2fb90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.stuNo+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.stuName+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.stuSex+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.stuAge+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.score+"b90dd5946f0946207856a8a37f441edf"+
"b6c5a531a458a2e790c1fd6421739d1c"+obj.className+"b90dd5946f0946207856a8a37f441edf"+
"fd273fcf5bcad3dfdad3c41bd81ad3e5"
);
})
}
})
});
//这个方法可以替代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();
}
}
});
})
})
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
相關推薦：
以上是JQuery實作選擇的功能 ：全選、全不選、反選（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn