Ohne zu viel Code können Sie Hyperlinks verwenden, um einfache und schöne benutzerdefinierte Kontrollkästchen zu implementieren

Heute ist mir plötzlich aufgefallen, dass die Stile von Kontrollkästchen in HTML nur begrenzt geändert werden können und dass heutzutage zum Erstellen eines Kontrollkästchens viel Code erforderlich ist. Daher habe ich über eine einfache Möglichkeit zur Implementierung nachgedacht. Es ist völlig bewiesen, dass dies machbar ist. Ohne weitere Umschweife werde ich einfach den Quellcode zu Ihrer Information veröffentlichen.

Ergebnis:

Wenn nicht ausgewählt:

Bei Auswahl gilt Folgendes:

Bildhintergrund:

checkboxSel.jpg

checkboxNoSel.jpg

Code:

HTML-Codeausschnitt:

Code kopieren

Der Code lautet wie folgt:

<a name="checkWeek" class="divCheckBoxNoSel"></a> Montag

Javascript-Codeausschnitt:

Code kopieren

Der Code lautet wie folgt:

$("a[name='checkWeek']").klick(function(){
wenn($(this).hasClass('divCheckBoxSel')){
$(this).removeClass('divCheckBoxSel');
}anders{
$(this).addClass('divCheckBoxSel');
}
});

CSS-Codeausschnitt:

Code kopieren

Der Code lautet wie folgt:

.divCheckBoxNoSel{
Hintergrund: URL("../image/checkboxNoSel.jpg") keine Wiederholung, Mitte, Mitte;
schweben: links;
Breite: 15px;
Höhe: 15px;
Rand: 1px durchgezogen #BDBDBD;
Farbe: #FFF;
}
.divCheckBoxSel{
Hintergrund: URL("../image/checkboxSel.jpg") keine Wiederholung Mitte Mitte;
schweben: links;
Breite: 15px;
Höhe: 15px;
Rand: 1px durchgezogen #BDBDBD;
Farbe: #FFF;
}

Es gibt viele Möglichkeiten, die einzelnen Hyperlinks zu unterscheiden. Tatsächlich lässt sich auf diese Weise auch problemlos ein Optionsfeld-ähnlicher Text realisieren, was Zeit spart.

<<: So verwenden Sie Xtrabackup zum Sichern und Wiederherstellen von MySQL

>>: So verwenden Sie CSS-Overflow: Hidden (Überlauf ausblenden und Floats löschen)

MySQL-Lernhinweise: Vollständiges Verwendungsbeispiel für Select-Anweisungen, detaillierte Erläuterung

Analyse des Prinzips von Nginx + Tomcat zur Erreichung eines Lastausgleichs sowie einer dynamischen und statischen Trennung

Artikel

Eine kurze Erläuterung der Unterschiede zwischen den verschiedenen Möglichkeiten zum Ausführen von .sh-Dateien in Ubuntu

Nodejs erstellt ein Tool zur Dokumentsynchronisierung zur automatischen Synchronisierung mit dem Gitee-Implementierungscode

Ursprüngliche Absicht Der Grund für die Entwicklu...

Ohne zu viel Code können Sie Hyperlinks verwenden, um einfache und schöne benutzerdefinierte Kontrollkästchen zu implementieren

MySQL-Lernhinweise: Vollständiges Verwendungsbeispiel für Select-Anweisungen, detaillierte Erläuterung

Mehrere Lösungen zum Vergessen des MySQL-Passworts

Detaillierte Erklärung des Docker-Bereitstellungstutorials für Jenkins-Anfänger

Implementierung der Bereitstellung eines privaten Docker-Warehouse-Registrars

Vue implementiert das Senden von Emoticons im Chatfenster

Analyse des Prinzips von Nginx + Tomcat zur Erreichung eines Lastausgleichs sowie einer dynamischen und statischen Trennung

Eine kurze Erläuterung der Unterschiede zwischen den verschiedenen Möglichkeiten zum Ausführen von .sh-Dateien in Ubuntu

Beispiel für die Installation und Bereitstellung von Docker unter Linux

Detaillierte Erläuterung des Prozesses zum Erstellen von Bodennavigationseffekten mit JavaScript

XHTML-Tutorial für die ersten Schritte: XHTML-Webseiten-Bildanwendung

Artikel empfehlen

Detailliertes Tutorial zur Installation des Tomcat9-Windows-Dienstes

Analyse des Prozesses zur Implementierung eines Nginx+Tomcat-Clusters unter Windwos

Eine kurze Einführung in die Unterschiede zwischen HTML und XHTML sowie HTML4- und HTML5-Tags

Entwickeln Sie Beispielcode für einen Taschenrechner mit nativem JavaScript

Detaillierte Erläuterung der Implementierung einer regelmäßigen Sicherung von MySQL-Datenbanktabellen

Detaillierte Erklärung von MySQL Explain

Nodejs erstellt ein Tool zur Dokumentsynchronisierung zur automatischen Synchronisierung mit dem Gitee-Implementierungscode

So verwenden Sie gespeicherte Prozeduren in MySQL, um schnell 1 Million Datensätze zu generieren

Fragen zum Vorstellungsgespräch zu JS 9 Promise

Eine kurze Diskussion über den Entwurf und die Optimierung von MySQL-Baumstrukturtabellen

Detaillierte Erläuterung des Implementierungsprinzips der Transaktionsisolationsstufe in MySQL

Detaillierte Erklärung der verschiedenen Verwendungen von proxy_pass in nginx

Zusammenfassung häufig verwendeter MySQL-Befehle im Linux-Betriebssystem

Was wir über absolute und relative CSS-Werte zu sagen haben

Detaillierte Erklärung des Unterschieds zwischen einem href=# und einem href=javascript:void(0)