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:

    
学员信息查询管理系统
    条件：
 
    
    
    

        

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

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!