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

Example of adding attributes using style in html

Add inline styles to the required links: Copy code...

How to sort a row or column in mysql

method: By desc: Neither can be achieved: Method ...

How to make your browser talk with JavaScript

Table of contents 1. The simplest example 2. Cust...

mysql 5.6.23 winx64.zip installation detailed tutorial

For detailed documentation on installing the comp...

Using MySQL database in docker to achieve LAN access

1. Get the mysql image docker pull mysql:5.6 Note...

Tutorial on installing Pycharm and Ipython on Ubuntu 16.04/18.04

Under Ubuntu 18.04 1. sudo apt install python ins...

How to install and modify the initial password of mysql5.7.18

For Centos installation of MySQL, please refer to...

Display special symbols in HTML (with special character correspondence table)

Problem Reproduction When using HTML for editing,...

Detailed explanation of sql_mode mode example in MySQL

This article describes the sql_mode mode in MySQL...

HTML meta explained

Introduction The meta tag is an auxiliary tag in ...

A solution to the abnormal exit of Tomcat caused by semaphore

I'm playing with big data recently. A friend ...

Summary of the pitfalls you may not have encountered in WeChat applet development

Table of contents getApp() Define variables at th...

Detailed explanation of mktemp, a basic Linux command

mktemp Create temporary files or directories in a...

Nginx monitoring issues under Linux

nginx installation Ensure that the virtual machin...

Detailed explanation of the use of Gulp.js, a powerful tool for front-end task construction

Table of contents Overview Install Gulp.js Create...