Simple custom beautiful checkbox _ HTML/Xhtml _ webpage creation can be achieved without too much code using hyperlinks

The checkbox style in html is limited, and a lot of code is required to create a checkbox. The following describes how to use hyperlinks to implement simple custom beautiful check boxes, if you are interested, don't miss out and suddenly think about it today. The style of the checkbox in html is limited, and now you need to write a lot of code to create a checkbox, then I came up with a simple implementation method. This proves completely feasible. If you don't talk about it, paste the source code directly for your reference.

Effect:

When not selected:

Image Background:

CheckboxSel.jpg

CheckboxNoSel.jpg

Code:

Html code snippet:

The Code is as follows:

Monday

JavaScript code snippet:

The Code is as follows:

$ ("A [name = 'checkweek']"). click (function (){
If ($ (this). hasClass ('pcheckboxsel ')){
$ (This). removeClass ('pcheckboxsel ');
} Else {
$ (This). addClass ('pcheckboxsel ');
}
});

Css code snippet:

The Code is as follows:

. PCheckBoxNoSel {
Background: url ("../image/checkboxNoSel.jpg") no-repeat center;
Float: left;
Width: 15px;
Height: 15px;
Border: 1px solid # BDBDBD;
Color: # FFF;
}
. PCheckBoxSel {
Background: url ("../image/checkboxSel.jpg") no-repeat center;
Float: left;
Width: 15px;
Height: 15px;
Border: 1px solid # BDBDBD;
Color: # FFF;
}

There are many ways to differentiate between each hyperlink. In fact, a single hyperlink button can be easily implemented, saving time.