php反选全选代码,JQuery实现选择的功能 ：全选、全不选、反选（代码）

这篇文章给大家介绍的文章内容是关于JQuery实现选择的功能 ：全选、全不选、反选，有很好的参考价值，希望可以帮助到有需要的朋友。

看重点就行了，最后面给一个网页完整的代码

代码实例：

function selectStu() {

$.ajax("StuList",{

type:"post",

data:{"method":"finList"},

success:function(data){ //循环遍历

$.each(data,function(index,obj){

$("#tab").append( "

"+ //首先从数据库读出数据 因为数据库主键是学号，而且对学号进行操作

//在input里面的值value添加数据中的学号

"

"+

"

"+obj.stuNo+""+

"

"+obj.stuName+""+

"

"+obj.stuSex+""+

"

"+obj.stuAge+""+

"

"+obj.score+""+

"

"+obj.className+""+

"

"

);

})

}

})

}

全选：

///这个方法可以替代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"));

})

});

全选操作案例：

数据遍历出来：

点击全选：

反选操作案例：

首先选中几个

然后点击反选：

附上完整网页的代码：

Insert title here

学员信息查询管理系统

条件：

全选 反选	学号	姓名	性别	年龄	成绩	班级

$(selectStu())

function selectStu() {

$.ajax("StuList",{

type:"post",

data:{"method":"finList"},

success:function(data){

//循环遍历

$.each(data,function(index,obj){

$("#tab").append(

"

"+

//首先从数据库读出数据 因为数据库主键是学号，而且对学号进行操作

//在input里面的值value添加数据中的学号

"

"+

"

"+obj.stuNo+""+

"

"+obj.stuName+""+

"

"+obj.stuSex+""+

"

"+obj.stuAge+""+

"

"+obj.score+""+

"

"+obj.className+""+

"

"

);

})

}

})

}

$(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(

"

"+

"

"+

"

"+obj.stuNo+""+

"

"+obj.stuName+""+

"

"+obj.stuSex+""+

"

"+obj.stuAge+""+

"

"+obj.score+""+

"

"+obj.className+""+

"

"

);

})

}

})

});

//这个方法可以替代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();

}

}

});

})

})

相关推荐：