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:

nbsp;html>


<meta>
<title>Insert title here</title>



    <h1 id="学员信息查询管理系统">学员信息查询管理系统</h1>
    条件：<p><input> <input>
    <input>
    
    </p>

                                                                                                                 

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

         <script></script>     <script> $(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=&#39;stu&#39; value=&#39;"+obj.stuNo+"&#39; type=&#39;checkbox&#39; />"+ "<td>"+obj.stuNo+""+ "<td>"+obj.stuName+""+ "<td>"+obj.stuSex+""+ "<td>"+obj.stuAge+""+ "<td>"+obj.score+""+ "<td>"+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( "<tr>"+ "<td><input name=&#39;stu&#39; type=&#39;checkbox&#39; value=&#39;"+obj.stuNo+"&#39; />"+ "<td>"+obj.stuNo+""+ "<td>"+obj.stuName+""+ "<td>"+obj.stuSex+""+ "<td>"+obj.stuAge+""+ "<td>"+obj.score+""+ "<td>"+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; } }); //反选 $(&quot;#ReverseSelect&quot;).on(&quot;click&quot;,function(){ $(&quot;#tab td :checkbox&quot;).each(function(){ //遍历所有复选框，然后取值进行 !非操作 $(this).prop(&quot;checked&quot;, !$(this).prop(&quot;checked&quot;)); }) }); $("#del_btn").on("click",function(){ var arr=new Array(); $(&#39;#tab input:checkbox[name=stu]:checked&#39;).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>

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!