How to use custom images in Html to display checkboxes

How to use custom images in Html to display checkboxes

If you need to use an image to implement the use of a checkbox, you can use it to implement it. The implementation principle is to replace the display of the checkbox with a label, set the display of the checkbox to none, use the image img to be displayed in the label tag, and then use a js function to control the switching of the image whether it is selected or not.

JavaScript CodeCopy content to clipboard
  1. <label for = "agree" >
  2. <img class = "checkbox" alt = "checked" src = "../img/checked.png" id = "checkimg" onclick = "checkclick();" >
  3. </label>
  4. <input type= "checkbox" style= "display:none" id= "agree" checked= "checked" >
  5. <script>
  6.           function checkclick(){
  7.              var checkimg = document.getElementById( "checkimg" );
  8.              if ($( "#agree" ).is( ':checked' ) ){
  9. $( "#agree" ).attr( "checked" , "unchecked" );
  10. checkimg.src = "../img/unchecked.png" ;
  11. checkimg.alt= "unchecked" ;
  12. } else {
  13. $( "#agree" ).attr( "checked" , "checked" );
  14. checkimg.src = "../img/checked.png" ;
  15. checkimg.alt= "check" ;
  16. }
  17. }
  18. </script>

The above is all the content of the method of using custom images in Html to realize checkbox display. I hope everyone will support 123WORDPRESS.COM~

<<:  MySQL transaction analysis

>>:  Implementation of CSS circular hollowing (coupon background image)

Recommend

MYSQL METADATA LOCK (MDL LOCK) theory and lock type test

Table of contents MYSQL METADATA LOCK (MDL LOCK) ...

Usage of Linux userdel command

1. Command Introduction The userdel (user delete)...

Detailed explanation of how to effectively store IP addresses in MySQL and how to convert between string IP and numerical values

When looking at High Performance MySQL Version 3 ...

HTML table tag tutorial (8): background image attribute BACKGROUND

Set a background image for the table. You can use...

Detailed tutorial on running Tomcat in debug mode in IDEA Maven project

1. Add the following dependencies in pom.xml <...

Detailed explanation of the usage of the alias command under Linux

1. Use of alias The alias command is used to set ...

Front-end state management (Part 1)

Table of contents 1. What is front-end state mana...

CSS Paint API: A CSS-like Drawing Board

1. Use Canvas images as CSS background images The...

How to delete a property of an object in JavaScript

1. delete delete is the only real way to remove a...

Summary of Spring Boot Docker packaging tools

Table of contents Spring Boot Docker spring-boot-...

Summary of basic SQL statements in MySQL database

This article uses examples to describe the basic ...

VScode Remote SSH remote editing and debugging code

The latest Insider version of Visual Studio Code ...

How to delete an image in Docker

The command to delete images in docker is docker ...

About Tomcat combined with Atomikos to implement JTA

Recently, the project switched the environment an...

Detailed explanation of the relationship between the primary key being 0 and the primary key self-selection constraint in MySQL (details)

Preface This article mainly introduces the relati...