집 > 기사 > 웹 프론트엔드 > jQuery는 선택 및 선택 반전이 아닌 전체 선택 기능을 어떻게 구현합니까? (자세한 코드 설명)

jQuery는 선택 및 선택 반전이 아닌 전체 선택 기능을 어떻게 구현합니까? (자세한 코드 설명)

青灯夜游앞으로: 2018-10-25 16:27:371572검색

이번 글에서는 선택과 선택 반전이 아닌 모두 선택 기능을 구현하는 jQuery의 방식을 소개하고자 합니다(자세한 코드 설명). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

jQuery는 Font Awesome 글꼴 아이콘을 결합하여 모두 선택, 선택 취소 및 반전 기능을 실현합니다. # 🎜🎜 #

Font Awesome 글꼴 아이콘 링크 주소: http://www.fontawesome.com.cn/faicons/

#🎜 🎜##효과 :#effect ## ## ## ## ## ## ## ## ## ## ## ## 🎜🎜 ## ## ## 🎜 🎜# 코드:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />

    <style type="text/css">
        label {
            display: inline-flex;
            display: -webkit-inline-flex;
            position: relative;
            cursor: pointer;
            width: 6%;
        }
        
        .box {
            cursor: pointer;
            width: 16px;
            height: 16px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid lightblue;
            background: lightblue;
        }
        
        .fa-check {
            position: absolute;
            top: 3px;
            left: 2px;
            color: #fff;
            border: none;
        }
        
    </style>

</head>

<body>
    <p class="wrapper">
        <label>
			<input type="checkbox" class="box"/>
			<span class="remeber">
				香蕉
			</span>
			<i class="fa fa-fw"></i>
		</label>
        <label class="wrapper">
			<input type="checkbox" class="box" />
			<span class="remeber">
				苹果
			</span>
			<i class="fa fa-fw"></i>
		</label>
        <label class="wrapper">
			<input type="checkbox" class="box"/>
			<span class="remeber">
				西瓜
			</span>
			<i class="fa fa-fw"></i>
		</label>
        <label class="wrapper">
			<input type="checkbox" class="box"/>
			<span class="remeber">
				橘子
			</span>
			<i class="fa fa-fw"></i>
		</label>
    </p>

    <br>

    <input type="button" name="" id="check-all" value="全选" />
    <input type="button" name="" id="check-no" value="不选" />
    <input type="button" name="" id="check-reverse" value="反选" />


    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function() {

            $(&#39;body&#39;).on("click", ".box", function() {
                $(this).parent().find(&#39;.fa&#39;).toggleClass(&#39;fa-check&#39;);
            });

            //全选 
            $("#check-all").click(function() {
                $(".wrapper label i").each(function() {
                    $(this).addClass("fa-check");
                })
            });

            //不选
            $("#check-no").click(function() {
                $(".wrapper label i").each(function() {
                    $(this).removeClass("fa-check");
                })
            });

            //反选
            $("#check-reverse").click(function() {
                $(".wrapper label i").each(function() {
                    $(this).toggleClass("fa-check");
                })
            });


        })
    </script>
</body>

</html>

위 내용은 jQuery는 선택 및 선택 반전이 아닌 전체 선택 기능을 어떻게 구현합니까? (자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：ajax-plus 사용법 소개(코드)다음 기사：ajax-plus 사용법 소개(코드)