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)

5 VueUse libraries that can speed up development (summary)

Recommend

Usage instructions for the docker create command

The docker create command can create a container ...

In MySQL database, datetime, bigint, and timestamp are used to represent time selection. Which one is the most efficient for storing time?

Table of contents # Post-data preparation # SQL q...

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

5 VueUse libraries that can speed up development (summary)

Summary of MySQL database like statement wildcard fuzzy query

Vue implements the countdown component for second kills

Docker uses Git to implement the detailed process of Jenkins release and test projects

Exploration and correction of the weird behavior of parseInt() in js

Detailed installation and configuration tutorial of MySQL flashback tool binlog2sql

Summary of 11 amazing JavaScript code refactoring best practices

Summary of Nginx load balancing methods

Comprehensive analysis of optimistic locking, pessimistic locking and MVCC in MySQL

Detailed explanation of the process of realizing calculator function in javascript

Recommend

Usage instructions for the docker create command

In MySQL database, datetime, bigint, and timestamp are used to represent time selection. Which one is the most efficient for storing time?

Analysis of MySQL latency issues and data flushing strategy process

Steps to set up and mount shared folders on Windows host and Docker container

Three ways to share component logic in React

How to build a multi-node Elastic stack cluster on RHEL8 /CentOS8

Detailed explanation of JavaScript state container Redux

MySQL multi-instance configuration application scenario

Tutorial on installing JDK Tomcat MySQL on Linux (remote access using Mac)

MYSQL implements ranking and querying specified user ranking function (parallel ranking function) example code

What does it mean to add a question mark (?) after the CSS link address?

A detailed account of the process of climbing a pit of Docker deployment service

Reasons and solutions for MySQL failing to create foreign keys

Two ways to start Linux boot service

Theory: The two years of user experience