看重點就行了，最後面給一個網頁完整的代碼 代碼實例： 全選： 反選： 全選操作案例： 數據遍歷出來： 點擊全選： 反選操作案例： 首先選中幾個 然後點擊反選： 附上完整網頁的代碼： ...
看重點就行了，最後面給一個網頁完整的代碼
代碼實例：
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>
