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

<label for = "agree" >
<img class = "checkbox" alt = "checked" src = "../img/checked.png" id = "checkimg" onclick = "checkclick();" >
</label>
<input type= "checkbox" style= "display:none" id= "agree" checked= "checked" >
<script>
function checkclick(){
var checkimg = document.getElementById( "checkimg" );
if ($( "#agree" ).is( ':checked' ) ){
$( "#agree" ).attr( "checked" , "unchecked" );
checkimg.src = "../img/unchecked.png" ;
checkimg.alt= "unchecked" ;
} else {
$( "#agree" ).attr( "checked" , "checked" );
checkimg.src = "../img/checked.png" ;
checkimg.alt= "check" ;
}
}
</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~

Introduction to the difference between on and where conditions in MySQL left join operation

Blog

How to use custom images in Html to display checkboxes

Summary of several MySQL installation methods and configuration issues

Example of how to change the line spacing of HTML table

Example of how to use CSS3 to layout elements around a center point

Introduction to the difference between on and where conditions in MySQL left join operation

Example of creating circular scrolling progress bar animation using CSS3

The difference between GB2312, GBK and UTF-8 in web page encoding

MySQL 5.7.18 Archive compressed version installation tutorial

In-depth explanation of the maximum value of int in MySQL

Practical record of optimizing MySQL tables with tens of millions of data

Detailed graphic explanation of MySql5.7.18 character set configuration

Recommend

base target="" specifies the target of the base link to open the frame

Two ways to implement HTML page click download file

Let's talk in depth about the principle and implementation of new in JS

Weather icon animation effect implemented by CSS3

It is not recommended to copy the content in Word directly to the editor on the website.

Implementation steps for building FastDFS file server in Linux

Analysis of the principles of docker containers

Comprehensive interpretation of MySQL master-slave replication, from principle to installation and configuration

How to use provide to implement state management in Vue3

How to implement controllable dotted line with CSS

An article tells you how to implement Vue front-end paging and back-end paging

Vue ElementUI implements asynchronous loading tree

vue.config.js packaging optimization configuration

Detailed example of using CSS to beautify HTML form controls (form beautification)