JavaScript zum Erreichen aller oder umgekehrter Auswahlfunktionen

In diesem Artikel wird der spezifische JavaScript-Code zur Realisierung der Funktion „Alle auswählen“ oder „Auswahl umkehren“ zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Der Code lautet wie folgt

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Fall – Alle Tabellen auswählen</title>
    <Stil>
        Tisch {
            Rand: 1px durchgezogen;
            Rand: automatisch;
            Breite: 500px;
        }

        td, th {
            Textausrichtung: zentriert;
            Rand: 1px durchgezogen;
        }

        .aus {
            Hintergrundfarbe: weiß;
        }

        .über {
            Hintergrundfarbe: rosa;
        }
        div{
            Rand oben: 10px;
            Textausrichtung: zentriert;
        }
    </Stil>
    <Skript>
        fenster.onload = Funktion () {
            //Alles auswählen document.getElementById("checkAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                für (var i = 0; i < cbs.Länge; i++) {
                    cbs[i].checked = wahr;
                }
            }
            //Alle abwählen document.getElementById("unCheckAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                für (var i = 0; i < cbs.Länge; i++) {
                    cbs[i].checked = falsch;
                }
            }
            //Erneut prüfen document.getElementById("reCheck").onclick = function () {
                var cbs = document.getElementsByName("cb");
                für (var i = 0; i < cbs.Länge; i++) {
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            //Wenn die Maus darüberfährt, ändert sich die Farbe var trs = document.getElementsByTagName("tr");
            für (var i = 0; i < trs.length; i++) {
                trs[i].onmouseover = Funktion () {
                    dieser.Klassenname = "über";
                }
                trs[i].onmouseout = Funktion () {
                    dieser.Klassenname = "out";
                }
            }

            //Das oberste Kontrollkästchen aktivieren und alles auswählen document.getElementById("firstCb").onclick = function () {
                var cbs = document.getElementsByName("cb");
                für (var i = 0; i < cbs.Länge; i++) {
                    cbs[i].checked = dies.checked;
                }
            }

        }

    </Skript>
</Kopf>
<Text>
<Tabelle>
    <caption>Studenteninformationsformular</caption>
    <tr>
        <td><input Typ="Checkbox" Name="cb" ID="firstCb"></td>
        <td>Nummer</td>
        <td>Name</td>
        <td>Geschlecht</td>
        <td>Betrieb</td>
    </tr>
    <tr>
        <td><Eingabetyp="Kontrollkästchen" Name="cb"></td>
        <td>1</td>
        <td>Linghu Chong</td>
        <td>Männlich</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">Löschen</a></td>
    </tr>

    <tr>
        <td><Eingabetyp="Kontrollkästchen" Name="cb"></td>
        <td>2</td>
        <td>Lass mich gehen</td>
        <td>Männlich</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">Löschen</a></td>
    </tr>

    <tr>
        <td><Eingabetyp="Kontrollkästchen" Name="cb"></td>
        <td>3</td>
        <td>Yue Buqun</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">Löschen</a></td>
    </tr>
</Tabelle>
<div>
    <input type="button" value="Alles auswählen" id="checkAll">
    <input type="button" value="Alle abwählen" id="unCheckAll">
    <input type="button" value="Erneut prüfen" id="erneut prüfen">
</div>


</body>
</html>

Ergebnisse der Operation

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:

js, um ein Beispiel für die Auswahl aller Kontrollkästchen und die umgekehrte Auswahl zu erreichen
js implementiert die Methode zum Auswählen aller Kontrollkästchen, zum Aufheben der Auswahl und zum Invertieren von Kontrollkästchen
AngularJS implementiert die Funktion zum Auswählen und Abwählen von allem
Javascript-Kontrollkästchen: Alle auswählen/alle abwählen und stapelweise löschen
Verwenden von Vue.js, um den Effekt aller Auswahlen und umgekehrten Auswahlen von Kontrollkästchen zu erzielen
Kompatibel mit IE- und Firefox-Versionen von js, um die Auswahl aller Kontrollkästchen umzukehren
JavaScript implementiert einfache Select-All- und Inverse-Select-Funktionen
js html css, um Kontrollkästchen für die gesamte Auswahl und die umgekehrte Auswahl zu erreichen
Detaillierte Erläuterung von Javascript zur Implementierung von Kontrollkästchen-Allesauswahl- und umgekehrten Auswahlereignissen
js betreibt CheckBoxList, um alles auszuwählen/alle abzuwählen (wird auf der Clientseite ausgeführt)

<<: MySQL-Praxiskenntnisse: Analyse von Methoden zum Vergleichen, ob zwei Tabellen unterschiedliche Daten haben

>>: Remote-Entwicklung mit VSCode und SSH