Without too much code, you can use hyperlinks to implement simple and beautiful custom check boxes

Without too much code, you can use hyperlinks to implement simple and beautiful custom check boxes
Today I suddenly thought that the styles of check boxes in HTML can be changed are limited, and it takes a lot of code to make a check box now, so I thought of a simple way to implement it. It has been fully proven that this is feasible. Without further ado, I will just post the source code for your reference.

Result:

When not selected: When selected:

Image background:

checkboxSel.jpg

checkboxNoSel.jpg

Code:

HTML code snippet:

Copy code
The code is as follows:

<a name="checkWeek" class="divCheckBoxNoSel"></a> Monday

javascript code snippet:

Copy code
The code is as follows:

$("a[name='checkWeek']").click(function(){
if($(this).hasClass('divCheckBoxSel')){
$(this).removeClass('divCheckBoxSel');
}else{
$(this).addClass('divCheckBoxSel');
}
});

CSS code snippet:

Copy code
The code is as follows:

.divCheckBoxNoSel{
background: url("../image/checkboxNoSel.jpg") no-repeat center center;
float:left;
width:15px;
height:15px;
border:1px solid #BDBDBD;
color:#FFF;
}
.divCheckBoxSel{
background: url("../image/checkboxSel.jpg") no-repeat center center;
float:left;
width:15px;
height:15px;
border:1px solid #BDBDBD;
color:#FFF;
}

There are many ways to distinguish each hyperlink, and in fact, radio button like text can also be easily realized in this way, thus saving time.

<<:  How to use Xtrabackup to back up and restore MySQL

>>:  How to use css overflow: hidden (overflow hiding and clearing floats)

Recommend

Detailed tutorial on installing Ubuntu 19.10 on Raspberry Pi 4

Because some dependencies of opencv could not be ...

Solution to the impact of empty paths on page performance

A few days ago, I saw a post shared by Yu Bo on G...

Detailed explanation of efficient MySQL paging

Preface Usually, a "paging" strategy is...

Summary of methods for finding and deleting duplicate data in MySQL tables

Sometimes we save a lot of duplicate data in the ...

JS implements sliding up and down on the mobile terminal one screen at a time

This article shares with you the specific code of...

Implementation of inserting millions of records into MySQL database within 10 seconds

First, let’s think about a question: To insert su...

The process of installing SVN on Ubuntu 16.04.5LTS

This article briefly introduces the process of se...

About the selection of time date type and string type in MySQL

Table of contents 1. Usage of DATETIME and TIMEST...

JavaScript event delegation principle

Table of contents 1. What is event delegation? 2....

About the "occupational disease" of designers

I always feel that designers are the most sensiti...

Use DIV mask to solve the problem that directly checking the checkbox with the mouse is invalid

During the front-end development process, a situat...

Detailed example of using useState in react

useState useState adds some internal state to a c...

Simple operation of installing vi command in docker container

When using a docker container, sometimes vim is n...

How to create a my.ini file in the MySQL 5.7.19 installation directory

In the previous article, I introduced the detaile...

Automated front-end deployment based on Docker, Nginx and Jenkins

Table of contents Preliminary preparation Deploym...