jQuery implementiert alle Auswahl- und umgekehrten Auswahloperationsfälle

In diesem Artikel wird der spezifische Code von jQuery zur Implementierung der vollständigen Auswahl- und umgekehrten Auswahloperation zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Alles auswählen + Auswahl aufheben

Sie können die Ergebnisse basierend auf der Konsole anzeigen

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Filterauswahl</title>
    <script src="jquery-3.2.1.min.js"></script>
</Kopf>

<Text>

    <Tabellengrenze="1">
        <tr>
            <td><Eingabetyp="Kontrollkästchen" Wert="1"></td>
            <td>Moloch</td>
            <td>450</td>
        </tr>
        <tr>
            <td><Eingabetyp="Kontrollkästchen" Wert="2"></td>
            <td>Schwertkämpfer</td>
            <td>6300</td>
        </tr>
        <tr>
            <td><Eingabetyp="Kontrollkästchen" Wert="3"></td>
            <td>Schwertprinzessin</td>
            <td>6300</td>
        </tr>
        <tr>
            <td><Eingabetyp="Kontrollkästchen" Wert="4"></td>
            <td>Schwertdämon</td>
            <td>6300</td>
        </tr>
    </Tabelle>
 
    <input type="button" value="Klicken Sie, um den ersten auszuwählen" id="firstBtn">
    <input type="button" value="Klicken, um den letzten auszuwählen" id="lastBtn">
    <input type="button" value="Alles für Stapellöschung auswählen" id="allBtn">
    <input type="button" value="Ausgewählte anzeigen" id="checkBtn">
    <input type="button" value="Anzeigen deaktiviert" id="nocheckBtn">
    <input type="button" value="Invert" id="overBtn">
    <input type="button" value="Verbesserte Version der umgekehrten Auswahl" id="overBtn1">

<Skript>

        $(Funktion() {
            //jQuery verwendet den Filterselektor, um einen Farbwechsel zwischen geraden und ungeraden Zahlen zu erreichen $("table tr:even").css('background-color','pink');
            $("table tr:odd").css('Hintergrundfarbe','blau');
            // 
            
            // Nimm den ersten $("#firstBtn").click(function() {
                var erste = $("table tr:first").html();
                console.log(zuerst);  
            })

             // Holen Sie sich den letzten $("#lastBtn").click(function() {
                var last = $("Tabelle tr:last").text();
                console.log(letztes);  
            })
            // Alles auswählen---- wird zum Löschen in Stapeln verwendet$("#allBtn").click(function() { 
                // Idee: Alle Checkbox-td finden, durchlaufen und auswählen $.each($("table tr td>input"), function(index, value) {
                  // konsole.log(index);   
                  // konsole.log(Wert);
                    console.log($(this).val()); // Den Wert durchlaufen $(this).prop('checked',true); // Alles auswählen})

            }) 
            // Klicken Sie, um das ausgewählte $("#checkBtn").click(function() { anzuzeigen. 
                //Verwenden Sie den Filterselektor, um Folgendes auszuwählen:
                $("Tabelle tr td>Eingabe: geprüft")
                $.each($("Tabelle tr td>Eingabe: geprüft"), Funktion(Index, Wert) {
                    
                    console.log($(this).val()); // Den Wert durchlaufen})
            
            }) 
            // Klicken, um nicht markierte anzuzeigen $("#nocheckBtn").click(function() { 
                console.log($("table tr td>input:nicht(:überprüft)"))
            })
            // Auswahl umkehren$("#overBtn").click(function() { 
                $.each($("Tabelle tr td>Eingabe"), Funktion(Index, Wert) {
                    var istrue =$(this).prop("geprüft");
                    //console.log(value.checked = !value.checked); // Den Wert durchlaufen if(istrue){
                        $(this).prop("überprüft",false);
                   } anders{
                    $(this).prop("überprüft",true);
                   }
                })   
            })     
            // Verbesserte Version der vollständigen/inversen Auswahl $("#overBtn1").click(function() { 
                $.each($("Tabelle tr td>Eingabe"), Funktion(Index, Wert){
                $(this).prop("geprüft",!$(this).prop("geprüft"))
                })
            })
    })  
</Skript>

</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

jQuery implementiert die Auswahl von allem, die Umkehrung von allem und das Abrufen aller ausgewählten Kontrollkästchen
JQUERY-Kontrollkästchen Kontrollkästchen Alle auswählen, Alle abwählen
Zusammenfassung des Implementierungscodes für die jQuery CheckBox „Select All, Unselect All“
Zwei einfache Methoden zum Auswählen und Abbrechen von allem mit JQuery
jQuery ermittelt, ob das Kontrollkästchen aktiviert ist, wählt alle aus und deaktiviert den Implementierungscode
jQuery bedient Kontrollkästchen zum Auswählen und Abwählen aller
jquery checkbox CHECKBOX alles auswählen, abwählen
JQUERY CHECKBOX alles auswählen, alles abwählen, Auswahl umkehren, Methode drei
jQuery One-Click-Control-Kontrollkästchen „Alle auswählen“, „Abwählen“ oder „Alle abwählen“
Implementierung von CheckBox Select All und Deselect All basierend auf JQuery

<<: mysql-5.7.28 Installations-Tutorial unter Linux

>>: MySQL-Datenbank erstellen, Benutzer hinzufügen, Benutzerautorisierung, praktische Methode