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
Analyse der Nutzung von Prozesssteuerungsfunktionen/Statistikfunktionen/Gruppierungsabfragen in MySql
Der Weg vor uns ist lang und beschwerlich, aber i...
Implementierung der Miniprogramm-Aufzeichnungsfunktion
Vorwort Bei der Entwicklung eines Miniprogramms b...
So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox
Ich bin heute auf mehrere Browserkompatibilitätsp...
Ein kurzer Vortrag über Responsive Design
1. Was ist Responsive Design? Responsive Design b...
Zusammenfassung der Ereignisbehandlung im Vue.js-Frontend-Framework
1. v-on-Ereignisüberwachung Um DOM-Ereignisse abz...
Designreferenz Schönes und originelles Blog-Design
Alle unten aufgeführten Blogs sind originell und ...
Ein kurzes Verständnis der relevanten Sperren in MySQL
Dieser Artikel soll Ihnen vor allem dabei helfen,...
Vue implementiert eine Registerkartennavigationsleiste und unterstützt die Schiebefunktion nach links und rechts
In diesem Artikel werden hauptsächlich die folgen...
Mehrere Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS
Inhaltsverzeichnis 1. Selbstaufzählbare Eigenscha...
JavaScript zum Erzielen eines benutzerdefinierten Bildlaufleisteneffekts
In tatsächlichen Projekten befinden sich die Bild...
Beispielcode für die automatische Aktualisierung von Webseiten und den automatischen Sprung
Automatische Aktualisierung der Webseite: Fügen Si...
So beheben Sie den Verbindungsfehler zur Datenbank beim Start von ServerManager
Servermanager-Startfehler bei Verbindung zur Date...
HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)
Verwandte Artikel: Anfänger lernen einige HTML-Ta...
So ändern Sie den Inhalt eines vorhandenen Docker-Containers
1. Docker ps listet Container auf 2. Docker cp ko...
Mehrere Möglichkeiten zur Implementierung der CSS-Höhenänderung mit Breitenverhältnis
[Lösung 1: Padding-Implementierung] Prinzip: Wenn...