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

代码实例：

    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实现全选、全不选和反选功能的更多相关文章

  1. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  2. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  3. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  4. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  5. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. jquery之全选全不选

    <input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...

  7. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

  8. 用jQuery实现全选-全不选-反选的功能

    临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...

  9. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  10. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

随机推荐

  1. struts2整合uploadify插件怎样传参数

    关于uploadify3.1,先看下帮助文档中的有些知识. 其中有个onUploadStart方法,我们可以使用这个向后台传参. 下面举个例子, js: <script type="t ...

  2. MySql 踩坑小记

    MySql 踩坑一时爽,一直踩啊一直爽...   以下记录刚踩的三个坑,emmm... 首先是远程机子上创建表错误(踩第一个坑),于是将本地机器 MySql 版本回退至和远程一致(踩第二个坑),最后在 ...

  3. Buffer的工作方式

    1.Buffer的工作方式 前面<java NIO的工作方式>介绍了Selector检测到通信信道I/O有数据传输时,通过select()方法取得SocketChannel,将数据读取或写 ...

  4. php安装grpc报No releases available for package解决方法

    1.pecl.php.net搜索相应grpc的下载文件,这里找了个stable版本 https://pecl.php.net/get/grpc-1.17.0.tg 2.wge下载+pecl insta ...

  5. Apache-httpd.conf详解

    ## Apache服务器主配置文件.  包括服务器指令的目录设置.# 详见 <URL:http://www.apache.org/docs/> ## 请在理解用途的基础上阅读各指令.## ...

  6. Jmeter连接Redis，获取Redis数据集

    Redis(REmote DIctionary Server)是一个开源的内存数据结构存储,用作数据库,缓存和消息代理. 本博文是分享jmeter怎么连接使用Redis数据库. 安装Redis数据集J ...

  7. shell脚本--cut命令

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 1.1 选项说明 cut命令将行按指定的分隔符分割成多列,它的 ...

  8. TCP&UDP&Socket讲解（上）

    这两天我将整理TCP&UDP&Socket,大约花大家10-15分钟之间,希望本篇文章让大家对TCP使用的理解提高一个层次. 建议大家拿出纸和笔,画一下!!! 一.TCP 1. TCP ...

  9. asp .net core Get raw request.

      小弟初来乍到,分享一些工作学习中遇到的问题和解决方式,如有不准确或是有错误的地方,希望不吝赐教,谢过了.  --Dogtwo 背景: 一个代理服务器BK,接收前端A发送的请求,记录log,并转发给 ...

  10. 快乐的一天从JAVA第一课开始，生活美滋滋！！！

    ---恢复内容开始--- 学JAVA第一天 今天稀里糊涂就把JAVA环境配好了 现在回想一下,吧环境跟大家分享一下…… 第一步:下载         JAVA(推荐使用谷歌浏览器,因为谷歌浏览器右键点 ...