JQuery實作選擇的功能 ：全選、全不選、反選（程式碼）

這篇文章跟大家介紹的文章內容是關於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=&#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>"
                        );
                    })
                }
            })
        }

全選：

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

全選操作案例：

資料遍歷出來：

#點選全選：

反選操作案例：

先選取幾個

然後點選反選：

 

附上完整網頁的程式碼：

#

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>

 相關推薦：

angular如何使用websocket的方法介紹

Vue中v-on指令簡單事件綁定的屬性分析（附程式碼）

以上是JQuery實作選擇的功能 ：全選、全不選、反選（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！