So verwenden Sie benutzerdefinierte Bilder in HTML zum Anzeigen von Kontrollkästchen

Wenn Sie zur Implementierung eines Kontrollkästchens ein Bild verwenden müssen, können Sie es zur Implementierung verwenden. Das Implementierungsprinzip besteht darin, die Anzeige des Kontrollkästchens durch eine Beschriftung zu ersetzen, die Anzeige des Kontrollkästchens auf „keine“ zu setzen, das im Beschriftungs-Tag anzuzeigende Bild img zu verwenden und dann eine js-Funktion zu verwenden, um das Umschalten des Bilds zu steuern, unabhängig davon, ob es ausgewählt ist oder nicht.

JavaScript CodeInhalt in die Zwischenablage kopieren

<label für = "stimme zu" >
<img Klasse = "Kontrollkästchen" alt = "aktiviert" src = "../img/checked.png" id = "checkimg" onclick = "checkclick();" >
</Bezeichnung>
<Eingabetyp= "Kontrollkästchen" Stil= "Anzeige: keine" ID= "Zustimmen" aktiviert= "aktiviert" >
<Skript>
Funktion checkclick(){
var checkimg = document.getElementById( "checkimg" );
wenn ($( "#agree" ).ist( ':checked' ) ){
$( "#stimme zu" ).attr( "aktiviert" , "nicht aktiviert" );
checkimg.src = "../img/unchecked.png" ;
checkimg.alt= "nicht markiert" ;
} anders {
$( "#stimme zu" ).attr( "aktiviert" , "aktiviert" );
checkimg.src = "../img/checked.png" ;
checkimg.alt= "prüfen" ;
}
}
</Skript>

Das Obige ist der gesamte Inhalt der Methode zur Verwendung benutzerdefinierter Bilder in HTML zur Realisierung der Kontrollkästchenanzeige. Ich hoffe, jeder wird 123WORDPRESS.COM unterstützen~

<<: MySQL-Transaktionsanalyse

>>: Zusammenfassung der Techniken zur Implementierung komplexer Seitenlayouts mithilfe von Framesets

So stellen Sie vom lokalen Windows-Remotedesktop eine Verbindung zum Alibaba Cloud Ubuntu 16.04-Server her

So verwenden Sie benutzerdefinierte Bilder in HTML zum Anzeigen von Kontrollkästchen

So stellen Sie vom lokalen Windows-Remotedesktop eine Verbindung zum Alibaba Cloud Ubuntu 16.04-Server her

Nginx verwendet ctx, um Datenfreigabe- und Kontextänderungsfunktionen zu realisieren

Eine kurze Erläuterung temporärer MySQL-Tabellen und abgeleiteter Tabellen

So verwenden Sie CSS-Attribute, um Mausereignisse zu blockieren (Mausklicks können obere Elemente durchdringen)

Vue importiert Excel-Tabellen und lädt automatisch die Daten herunter, die nicht importiert werden konnten

Codeblock-Hervorhebung kann kopiert und angezeigt werden js Plugin highlight.js + clipboard.js Integration

CSS löst das Problem der Front-End-Bildverformung perfekt

Verwendung der MySQL DATE_FORMAT-Funktion

Detaillierte Erklärung zur Einführung benutzerdefinierter Schriftarten (Font-Face) in CSS

TCP-Socket-SYN-Warteschlange und Accept-Warteschlangen-Unterschiedsanalyse

Artikel empfehlen

CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung

Detaillierte Erläuterung des Tutorials zum Erstellen einer PHP-Umgebung für Docker

Detaillierter Vergleich von Ember.js und Vue.js

So verwenden Sie wangEditor in Vue und erhalten durch Echo von Daten den Fokus

Vue-Grundlagen-Tutorial: Bedingtes Rendering und Listen-Rendering

So legen Sie die UTF-8-Kodierung in einer MySQL-Datenbank fest

Natives JS zum Erzielen von Book-Flipping-Effekten

Detaillierte Erläuterung der Sicherung und Wiederherstellung von PSSQL-Datenbanken in Docker

Nginx Reverse-Proxy-Konfiguration entfernt Präfix

Heute werde ich einige seltene, aber nützliche JS-Techniken teilen

So zählen Sie die Anzahl bestimmter Zeichen in einer Datei unter Linux

Die automatische Inkrementierung der Primärschlüssel-ID von MySQL wird auf diese Weise nicht verarbeitet

So führen Sie den Top-Befehl im Batchmodus aus

Ein vollständiges Tutorial zur Installation von Ubuntu 20.04 mit einer virtuellen VMware-Maschine

Detaillierter Installationsprozess von mysql5.7.21 unter Win10