JQuery implementiert die Auswahlfunktion: Alles auswählen, Keine auswählen, Auswahl umkehren (Code)

Dieser Artikel führt Sie in die Auswahlfunktion von JQuery ein: Alle auswählen, keine auswählen und Auswahl umkehren. Es hat einen guten Referenzwert und ich hoffe, dass es Freunden in Not helfen kann.

Konzentrieren Sie sich einfach auf die wichtigsten Punkte. Geben Sie am Ende einen vollständigen Code für eine Webseite an

Codebeispiel:

    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=&#39;stu&#39; value=&#39;"+obj.stuNo+"&#39; type=&#39;checkbox&#39; /></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>"
                        );
                    })
                }
            })
        }

Alles auswählen:

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

Auswahl umkehren:

//反选
            $("#ReverseSelect").on("click",function(){
                
                $("#tab td :checkbox").each(function(){
                    //遍历所有复选框，然后取值进行 !非操作
                    $(this).prop("checked", !$(this).prop("checked"));
                })
            });

Alle Operationsfälle auswählen:

Die Daten werden durchlaufen:

Klicken Sie, um alle auszuwählen:

Beispiel für einen umgekehrten Auswahlvorgang:

Wählen Sie zunächst einige aus

und dann auf Auswahl umkehren klicken:

Angehängt ist der Code der vollständigen Webseite:

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

Verwandte Empfehlungen:

Einführung in die Verwendung von WebSocket durch Angular

Attributanalyse der einfachen Ereignisbindung der V-On-Direktive in Vue (mit Code)

Das obige ist der detaillierte Inhalt vonJQuery implementiert die Auswahlfunktion: Alles auswählen, Keine auswählen, Auswahl umkehren (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!