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

Docker nginx implementiert einen Host zum Bereitstellen mehrerer Sites

Die virtuelle Maschine, die ich von einer bestimm...

CSS: besuchte geheime Erinnerungen des Pseudoklassenselektors

Gestern wollte ich a:visited verwenden, um die Fa...

Tutorial-Diagramm zur Konfiguration der Tomcat-Umgebungsvariablen unter Win10

Vor der Konfiguration müssen wir Folgendes tun: 1...

So verwenden Sie den Linux-Befehl „locate“

01. Befehlsübersicht Der Befehl „locate“ ist eige...

Verwenden von js, um den Effekt eines Karussells zu erzielen

Lassen Sie uns heute darüber sprechen, wie Sie mi...

Native JS-Implementierung der Lupenkomponente

In diesem Artikelbeispiel wird der spezifische Co...

css3-Animation, Ballrollen, js-Steuerung, Animationspause

Mit CSS3 können Animationen erstellt werden, die ...

So installieren Sie Elasticsearch und Kibana in Docker

Elasticsearch erfreut sich derzeit großer Beliebt...

Hinweise zum Systemaufruf des Linux-Kernel-Gerätetreibers

/**************************** * Systemaufruf*****...

So beheben Sie Dateisystemfehler in Linux mit „fsck“

Vorwort Das Dateisystem ist für die Organisation ...

Tomcat-Sicherheitsspezifikationen (Tomcat-Sicherheitsverstärkung und -spezifikationen)

Tomcat ist ein Open-Source-Webserver. Das auf Tom...

Häufige Verwendung von Hooks in React

Inhaltsverzeichnis 1. Was ist ein Hook? 2. Warum ...

Detailliertes Tutorial zur Installation von MySQL auf CentOS 6.9

1. Bestätigen Sie, ob MySQL installiert wurde. Si...

Neonlichteffekte mit reinem CSS3 umgesetzt

Dies ist der zu erzielende Effekt: Sie können seh...

Prozessdiagramm für die Sitzungsfreigabe bei Tomcat Nginx Redis

1. Vorbereitung Middleware: Tomcat, Redis, Nginx ...