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)

Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

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

Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

MySQL-Gleitaggregation/Jahresaggregation – Prinzip und Anwendungsbeispielanalyse

Einige Front-End-Praxiszusammenfassungen der neuen Homepage von Alipay

Eine kurze Analyse der Unterschiede zwischen px, rem, em, vh und vw in CSS

HTML+CSS-Boxmodellbeispiel (Kreis, Halbkreis usw.) „border-radius“ ist einfach und leicht zu verwenden

Allgemeine MySQL-Anweisungen zum Anzeigen von Transaktionen und Sperren

Praktisches Beispiel einer virtuellen Vue-Liste

Untersuchung der drei zugrunde liegenden Mechanismen der globalen Statusverwaltung von React

So ändern Sie die Standardcodierung von MySQL in Linux

Pessimistisches Sperren und optimistisches Sperren in MySQL

Artikel empfehlen

Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung

So ändern Sie den Inhalt eines vorhandenen Docker-Containers

SQL-Methode zum Berechnen der Zeitstempeldifferenz

Die Komponente vue-cropper realisiert das Zuschneiden und Hochladen von Bildern

Detaillierte Erklärung der Destrukturierungszuweisung in JavaScript

Detaillierte Erklärung verschiedener Loop-Speed-Tests in JS, die Sie nicht kennen

Docker und iptables sowie Implementierung von Netzwerkisolations- und Kommunikationsvorgängen im Bridge-Modus

Installieren Sie Tomcat und stellen Sie die Website unter Linux bereit (empfohlen)

Anfänger lernen einige HTML-Tags (3)

So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein

Eingebettetes Transplantations-Docker-Fehlerproblem (Zusammenfassung)

Tipps zum Erstellen von Webseiten für Mobiltelefone

Analyse der Fallstricke beim Rundungsvorgang der ROUND-Funktion in MySQL

Bereitstellungs- und Installationsdiagramm für die Servervirtualisierung von VMware vSphere 6.0 (detaillierte Schritte)

mysql drei Tabellen verbunden, um eine Ansicht zu erstellen