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

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
  1. <label für = "stimme zu" >
  2. <img Klasse = "Kontrollkästchen" alt = "aktiviert" src = "../img/checked.png" id = "checkimg" onclick = "checkclick();" >
  3. </Bezeichnung>
  4. <Eingabetyp= "Kontrollkästchen" Stil= "Anzeige: keine" ID= "Zustimmen" aktiviert= "aktiviert" >
  5. <Skript>
  6.           Funktion checkclick(){
  7.              var checkimg = document.getElementById( "checkimg" );
  8.              wenn ($( "#agree" ).ist( ':checked' ) ){
  9. $( "#stimme zu" ).attr( "aktiviert" , "nicht aktiviert" );
  10. checkimg.src = "../img/unchecked.png" ;
  11. checkimg.alt= "nicht markiert" ;
  12. } anders {
  13. $( "#stimme zu" ).attr( "aktiviert" , "aktiviert" );
  14. checkimg.src = "../img/checked.png" ;
  15. checkimg.alt= "prüfen" ;
  16. }
  17. }
  18. </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

Artikel empfehlen

Mybatis + mysql verwendet gespeicherte Prozeduren, um Implementierungscode für Seriennummern zu generieren

Verwenden Sie gespeicherte Prozeduren, um Transak...

Detailliertes Tutorial zur Installation von JDK1.8 unter Linux

1. Reinigung vor der Installation rpm -qa | grep ...

Detaillierte Erklärung der Größe des Boxmodells, abhängig von seinen Polsterungs-, Rand- und Rahmenwerten

Das Boxmodell gibt die Breite und Höhe sowie die ...

Detaillierte Schritte zum Erstellen eines unabhängigen Mailservers auf Centos7.9

Inhaltsverzeichnis Vorwort 1. Intranet DNS A-Eint...

So finden und löschen Sie doppelte Zeilen in MySQL

Inhaltsverzeichnis 1. So finden Sie doppelte Zeil...

Implementierungsschritte zur Kapselung von Komponenten basierend auf React

Inhaltsverzeichnis Vorwort Wie kapselt Antd Kompo...

So migrieren Sie den MySQL-Speicherort auf eine neue Festplatte

1. Bereiten Sie eine neue Festplatte vor und form...

Tutorial-Analyse zur Installation und Nutzung des Linux-Leistungsüberwachungstools nmon

1. Einführung in nmon Nmon (Nigel's Monitor) ...

Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts

In diesem Artikel wird hauptsächlich erläutert, w...

Die Bilder in HTML werden direkt durch base64-kodierte Strings ersetzt

Kürzlich stieß ich auf eine Webseite, die zwar Bil...

Detaillierte Analyse der langsamen MySQL-Protokollöffnungsmethode und des Speicherformats

In Entwicklungsprojekten können wir SQL mit Effiz...

Implementierung der Validierungsregel für Vue Element-ui-Formulare

Inhaltsverzeichnis 1. Einleitung 2. Eingabemodus ...

Verwenden Sie Javascript, um eine dynamische QQ-Registrierungsseite zu erstellen

Inhaltsverzeichnis 1. Einleitung 1. Grundlayout 2...

Implementierung von Platzhaltern und Escape-Zeichen in der Linux-Befehlszeile

Wenn wir Stapeloperationen für einen Dateityp aus...

Detaillierte Schritte zum Debuggen von VUE-Projekten in IDEA

Um JS-Code zu debuggen, müssen Sie jedes Mal eine...