当前位置:Gxlcms > JavaScript > JQuery实现选择的功能:全选、全不选、反选(代码)

JQuery实现选择的功能:全选、全不选、反选(代码)

时间:2021-07-01 10:21:17 帮助过:1人阅读

这篇文章给大家介绍的文章内容是关于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>

相关推荐:

angular如何使用websocket的方法介绍

Vue中v-on指令简单事件绑定的属性分析(附代码)

以上就是JQuery实现选择的功能 :全选、全不选、反选(代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行