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

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)

Artikel empfehlen

Grundlegender JSON-Betriebsleitfaden in MySQL 5.7

Vorwort Aufgrund der Projektanforderungen werden ...

Vue-Entwicklungsbaumstrukturkomponenten (Komponentenrekursion)

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Vorgänge zum Erstellen des gemeinsamen Clusters und des Spiegelclusters von RabbitMq mit Docker

Inhaltsverzeichnis 1. Erstellen Sie die Betriebsu...

Eine detaillierte Einführung in die Grundlagen des Linux-Scriptings

Inhaltsverzeichnis 1. Skript-Vim-Umgebung 2. So d...

MySQL-Methode zum Anzeigen der aktuell verwendeten Konfigurationsdatei my.cnf (empfohlen)

my.cnf ist die Konfigurationsdatei, die beim Star...

MySQL-Fall bei der Verwendungsbeispielanalyse

Zuerst erstellen wir die Datenbanktabelle: Tabell...

Vue3+TypeScript implementiert ein vollständiges Beispiel einer rekursiven Menükomponente

Inhaltsverzeichnis Vorwort brauchen erreichen Ers...

So setzen Sie das Root-Passwort von Mysql in Windows zurück, wenn Sie es vergessen haben

Meine Maschinenumgebung: Windows 2008 R2 MySQL 5....

Der gesamte Prozess der Entwicklung eines Google-Plug-Ins mit vue+element

Einfache Funktion: Klicken Sie auf das Plug-In-Sy...

So zeigen Sie laufende Hintergrundprogramme in Linux an und beenden sie

Linux-Taskverwaltung - Ausführung und Beendigung ...

XHTML-Einführungstutorial: Verwendung von Listen-Tags

Listen werden verwendet, um eine Reihe ähnlicher o...

Lösung für das Problem der Nullspalte in der NOT IN-Füllgrube in MySQL

Als ich vor einiger Zeit an einer kleinen Funktio...

Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung

Dieser Artikel veranschaulicht anhand von Beispie...

Wie autorisiert man in Linux den gesamten Inhalt eines Ordners für einen bestimmten Benutzer?

【Problemanalyse】 Wir können den Befehl chown verw...

So installieren Sie die grüne Version von MySQL Community Server 5.7.16 und implementieren die Remote-Anmeldung

1. Laden Sie MySQL Community Server 5.7.16 herunt...