> 웹 프론트엔드 > JS 튜토리얼 > JQuery는 선택 기능을 구현합니다: 모두 선택, 없음 선택, 선택 반전(코드)

JQuery는 선택 기능을 구현합니다: 모두 선택, 없음 선택, 선택 반전(코드)

不言
풀어 주다: 2018-07-27 13:42:54
원래의
2647명이 탐색했습니다.

이 글에서는 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"));
                })
            });
로그인 후 복사

모든 작업 사례 선택: 데이터 통과됨:

# 🎜🎜#

모두 선택하려면 클릭:

#🎜 🎜#반선택 연산 사례 :

먼저 몇 가지 선택

#🎜 🎜# 그런 다음 역선택을 클릭합니다:

# 🎜🎜#

첨부된 내용은 전체 웹페이지의 코드입니다.





Insert title here



    

学员信息查询管理系统

条件:

全选 反选 学号 姓名 性别 年龄 成绩 班级
로그인 후 복사

#🎜🎜 #

관련 권장 사항:

Angular에서 웹소켓 사용 방법 소개

#🎜 🎜#

Vue의 v-on 명령은 간단합니다. 이벤트 바인딩의 속성 분석(코드 포함)

위 내용은 JQuery는 선택 기능을 구현합니다: 모두 선택, 없음 선택, 선택 반전(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿