suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie implementiert jQuery die Funktionen zum Auswählen aller, nicht zum Auswählen und Umkehren der Auswahl? (Detaillierte Code-Erklärung)

Wie implementiert jQuery die Funktionen zum Auswählen aller, nicht zum Auswählen und Umkehren der Auswahl? (Detaillierte Code-Erklärung)

青灯夜游
青灯夜游nach vorne
2018-10-25 16:27:371585Durchsuche

Der Inhalt dieses Artikels besteht darin, die jQuery-Methode zur Implementierung der Funktionen „Alles auswählen“, „Keine Auswahl“ und „Inverse Auswahl“ vorzustellen (detaillierte Codeerklärung). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

jQuery kombiniert mit dem Font Awesome-Schriftsymbol, um die Funktionen „Alles auswählen“, „Auswahl aufheben“ und „Auswahl umkehren“ zu realisieren

Font Awesome Font-Symbol-Linkadresse: http://www.fontawesome.com.cn/faicons/

Wirkung:

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>

Das obige ist der detaillierte Inhalt vonWie implementiert jQuery die Funktionen zum Auswählen aller, nicht zum Auswählen und Umkehren der Auswahl? (Detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Einführung in die Verwendung von Ajax-Plus (Code)Nächster Artikel：Einführung in die Verwendung von Ajax-Plus (Code)

In Verbindung stehende Artikel

Mehr sehen