Beispielcode für die Javascript-Operation „Alles auswählen/Alles abwählen“ in HTML

Beispielcode für die Javascript-Operation „Alles auswählen/Alles abwählen“ in HTML

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>Unbenanntes Dokument</title>
<script Typ="text/javascript" Sprache="javascript">
Funktion selectAllDels()
{
var allCheckBoxs = document.getElementsByName("preDelCheck");
var desc = document.getElementById("allChecked");
var selectOrUnselect=false;
für(var i = 0; i < alleCheckBoxen.Länge; i++)
{
wenn(alleCheckBoxen[i].checked){
auswählenOderAuswahl aufheben=true;
brechen;
}
}
if (AuswählenOderAuswahl aufheben)
{
_allUnchecked(alle Kontrollkästchen);
}anders
{
_allchecked(alle Kontrollkästchen);
}
}
Funktion _alleChecked(alleCheckBoxen){
für(var i = 0; i < alleCheckBoxen.Länge; i++)
{
alleCheckBoxen[i].checked = true;
}
}
Funktion _allUnchecked(alle Kontrollkästchen){
für(var i = 0; i < alleCheckBoxen.Länge; i++)
{
alleCheckBoxen[i].checked = false;
}
}
</Skript>
</Kopf>
<Text>
<p>Prüfung</p>
<form>
<input type="checkbox" name="preDelCheck" value="creme">ID1

<Eingabetyp="Kontrollkästchen" Name="preDelCheck" Wert="Zucker" >ID2

<Eingabetyp="Kontrollkästchen" Name="preDelCheck" Wert="Zucker">ID3

<Eingabetyp="Kontrollkästchen" Name="preDelCheck" Wert="Zucker">ID4

<Eingabetyp="Kontrollkästchen" Name="preDelCheck" Wert="Zucker">ID5

<input type="button" id="allChecked" value="Alle auswählen/Auswahl aller abwählen" onClick="selectAllDels()">
</form>
</body>
</html>

<<:  Häufig verwendete englische Schriftarten für die Webseitenerstellung

>>:  So installieren und implementieren Sie Zabbix 5.0 für Nginx

Artikel empfehlen

Vue implementiert das Methodenbeispiel der Tab-Routing-Umschaltkomponente

Vorwort In diesem Artikel wird die Verwendung des...

So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven

Wir alle kennen die Drag-and-Drop-Funktion von HT...

Schreiben Sie einen formellen Blog mit XHTML CSS

Der vollständige Name von Blog sollte Weblog sein...

Nexus nutzt API für den Betrieb

Nexus bietet RestApi, aber einige APIs müssen noc...

Vergleich der Effizienz verschiedener Methoden zum Löschen von Dateien in Linux

Testen Sie die Effizienz des Löschens einer große...

Vue-Kapselungskomponente Bildkomponente hochladen

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue

1. Zuerst erstellen wir eine JSON-Datei zur inter...