So bedienen Sie das Kontrollkästchen auf einer HTML-Seite
|
Kontrollkästchen sind auf Webseiten sehr verbreitet. Egal, ob es sich um eine E-Commerce-Website oder eine Plattform handelt, Sie werden Kontrollkästchen überall dort sehen, wo eine Auswahl getroffen werden muss. Als Nächstes sind hier zwei kleine Demos, die ich zuvor geschrieben habe, beide über Kontrollkästchen. Ich hoffe, sie werden Ihnen hilfreich sein. Der erste Teil beschäftigt sich mit dem Aktivieren und Deaktivieren aller Kontrollkästchen. Natürlich habe ich auch eine kleine Funktion hinzugefügt, die besagt, dass, wenn alle Kontrollkästchen der ausgewählten Produkte oder anderer Dinge darunter aktiviert sind, auch die Schaltfläche „Alle auswählen“ aktiviert wird; und umgekehrt. <!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
td{
Rand: 1px tief schwarz;
Textausrichtung: zentriert;
}
Tisch{
Rand: 1px tief schwarz;
}
#opp{
Randradius: 50 %;
Breite: 20px;
Höhe: 20px;
Rand: 1px Stil #eee;
Gliederungsstil: keiner;
}
</Stil>
</Kopf>
<Text>
<Tabelle>
<tr>
<td><input id="all" type="checkbox">Alles auswählen</td>
<td width="300px">Beispiel für Kontrollkästchen „Alles auswählen“</td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input Klasse="Liste" Typ="Kontrollkästchen"></td>
<td></td>
</tr>
<tr>
<td><input id="opp" type="button">Auswahl umkehren</td>
<td></td>
</tr>
</Tabelle>
<Skript>
var vll = document.getElementById("alle");
var vlist = document.getElementsByClassName("Liste");
var vopp = document.getElementById("opp");
vll.onclick=function(){
für(var i=0;i<vlist.length;i++){
vlist[i].checked=vll.checked;
}
}
für (var i = 0; i <vlist.length; i++) {
vlist[i].onclick=Funktion(){
wenn(dies.geprüft==false){
vll.checked=false;
}
anders{
für(var i2=0;i2<vlist.length;i2++){
wenn(vlist[i2].checked==false){
brechen;
}
wenn(i2>=vlist.length-1){
vll.checked=true;
}
}
}
}
}
vopp.onclick=Funktion(){
für(var i=0;i<vlist.length;i++){
vlist[i].checked=!vlist[i].checked;
wenn(vlist[i].checked==false){
vll.checked=false;
}
}
}
</Skript>
</body>
</html>Die zweite Möglichkeit besteht darin, den Stil des Kontrollkästchens anzupassen, d. h. unser Kontrollkästchen durch ein Bild zu ersetzen, um einen coolen Effekt hinzuzufügen. Dabei verwende ich ausschließlich CSS3-Schreibweise und verwende kein JavaScript. <!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
.box1{
Breite: 1000px;
Höhe: 50px;
Position: relativ;
}
Eingang{
Breite: 50px;
Höhe: 50px;
Deckkraft: 1;
Anzeige: keine;
}
Eingabe+Beschriftung{
Anzeige: Block;
Breite: 50px;
Höhe: 50px;
Hintergrund: url(img/2.png);
Hintergrundgröße: 100 %;
}
Eingabe: aktiviert + Label {
Hintergrund: URL (Bild/1.PNG);
Hintergrundgröße: 100 %;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box1">
<input Typ="Kontrollkästchen" Name="" ID="input1" Wert="" />
<label für="input1"></label>
</div>
<div Klasse="Box2">
<input Typ="Kontrollkästchen" Name="" ID="input2" Wert="" />
<label für="input2"></label>
</div>
<div Klasse="Box3">
<input Typ="Kontrollkästchen" Name="" ID="input3" Wert="" />
<label für="input3"></label>
</div>
</body>
</html>Oben ist die vom Editor eingeführte Funktionsweise von Kontrollkästchen in HTML-Seiten dargestellt. Ich hoffe, dass sie für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: So verwenden Sie CSS-Zähler, um geordnete Zahlenlisten zu verschönern
>>: base target="" gibt das Ziel des Basislinks zum Öffnen des Frames an
Artikel empfehlen
Detaillierte Erläuterung der kombinierten MySQL-Indexmethode
Für jedes DBMS sind die Indizes der wichtigste Op...
jQuery implementiert Formularvalidierungsfunktion
Beispiel für die Validierung eines jQuery-Formula...
Vant+postcss-pxtorem implementiert Browser-Anpassungsfunktion
Rem-Layout-Anpassung Die Stile in Vant verwenden ...
Teilen Sie den detaillierten Prozess zum Einrichten von Mysql5.6, um externen Netzwerkzugriff zu ermöglichen
Ich habe kürzlich MySQL 5.6 bereitgestellt und fe...
JavaScript-Quellcode für Elimination
JavaScript zum Erreichen der Quellcode-Download-A...
MySQL partitioniert vorhandene Tabellen in der Datentabelle
Inhaltsverzeichnis So funktioniert es Betriebsabl...
Ein einfaches Beispiel zum Erstellen einer dünnen Linientabelle in HTML
Wenn Sie wissen möchten, wie Sie diese Tabelle mi...
Praktische Hinweise zur Installation von Jenkins mit Docker-Compose
Erstellen Sie ein Verzeichnis cd /usr/local/docke...
So legen Sie die Schriftfarbe in HTML fest und erhalten mit PS eine genaue Schriftfarbe in HTML
1. HTML-Schriftfarbeneinstellung In HTML verwende...
RGB-Farbtabellensammlung
RGB-Farbtabelle Farbe Englischer Name RGB 16 Farb...
Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode
Einmal haben wir über das Würfelspiel gesprochen....
Reiner CSS-Header, korrigierter Implementierungscode
Es gibt zwei Hauptgründe, warum es schwierig ist,...
Zusammenfassung der grundlegenden Wissenspunkte der Linux-Gruppe
1. Grundlegende Einführung in die Linux-Gruppe Un...
Erste Schritte mit TS (TypeScript) im Vue-Projekt
Inhaltsverzeichnis 1. Einführung in Typescript 2....
Docker CP kopiert Dateien und gibt den Container ein
Geben Sie den laufenden Container ein # Geben Sie...