How does jQuery implement the functions of selecting all, not selecting and inverting selection? (detailed code explanation)-JS Tutorial-php.cn

How does jQuery implement the functions of selecting all, not selecting and inverting selection? (detailed code explanation)

青灯夜游

Release： 2018-10-25 16:27:37

forward

1598 people have browsed it

What this article brings to you is to introduce jQuery’s method of implementing the functions of selecting all, not selecting and inverting selection (detailed code explanation). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

jQuery combines with Font Awesome font icon to realize the functions of selecting all, not selecting and inverting selection

Font Awesome Font icon link address: http://www.fontawesome.com.cn/faicons/

## Effect:

##Code:

<!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>

Copy after login

The above is the detailed content of How does jQuery implement the functions of selecting all, not selecting and inverting selection? (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!