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~

Use @font-face to implement special characters on web pages (create custom fonts)

Blog

How to use custom images in Html to display checkboxes

Use @font-face to implement special characters on web pages (create custom fonts)

Several common methods for passing additional parameters when submitting a form

Introduction to setting up Tomcat to start automatically on Linux system

Analysis and solution of abnormal problem of loading jar in tomcat

Summary of four ways to loop through an array in JS

zabbix custom monitoring nginx status implementation process

MySQL fuzzy query usage (regular, wildcard, built-in function)

Detailed explanation of the properties and instance usage of hasOwnProperty in js

10 ways to view compressed file contents in Linux (summary)

Ubuntu 20.04 Best Configuration Guide (Newbie Essential)

Recommend

Specific use of MySQL segmentation function substring()

Detailed explanation of Vue's simple store

JS achieves five-star praise case

Detailed explanation of XML syntax

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

Analysis of the process of configuring a simple network environment based on Tcl language

Detailed explanation of the actual process of master-slave synchronization of MySQL database

Docker custom network detailed introduction

Use CSS to set the width of INPUT in TD

Zen coding for editplus example code description

Using Docker run options to override settings in the Dockerfile

Cross-browser development experience summary (I) HTML tags

Perfect solution for JavaScript front-end timeout asynchronous operation

Detailed example of IOS database upgrade data migration

Optimization analysis of Limit query in MySQL optimization techniques