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=&#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"));
                })
            });

すべて選択 操作ケース:

データトラバーサル:

クリックしてすべて選択:

最初に選択しますいくつか

次に、クリックして選択範囲を反転します:

完全な Web ページのコードを添付します:

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

        

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

関連する推奨事項:

Angular で WebSocket を使用する方法の紹介

プロパティVueのv-onディレクティブの単純なイベントバインディングの分析(コード添付)

以上がJQuery は選択関数を実装します: すべて選択、選択なし、選択を反転 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。