ホームページ > 記事 > ウェブフロントエンド > JQuery は選択関数を実装します: すべて選択、選択なし、選択を反転 (コード)
この記事では、JQuery の選択関数 (すべて選択、何も選択しない、逆選択) を紹介します。これは参考になるので、困っている友人に役立つことを願っています。
重要なポイントを見て、最後に Web ページの完全なコードを入力します
コード例:
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")); }) });
すべて選択 操作ケース:
データトラバーサル:
クリックしてすべて選択:
最初に選択しますいくつか
次に、クリックして選択範囲を反転します:
完全な Web ページのコードを添付します:
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
関連する推奨事項:
Angular で WebSocket を使用する方法の紹介プロパティVueのv-onディレクティブの単純なイベントバインディングの分析(コード添付)
以上がJQuery は選択関数を実装します: すべて選択、選択なし、選択を反転 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。