You can easily customize beautiful check boxes without using too much code and use hyperlinks_HTML/Xhtml_Web page production

Today I suddenly thought that the check box in HTML has limited styles that can be changed, and making a check box now requires writing a lot of code, and then I thought of a simple implementation. Completely proven that this is possible. Not much to say, just post the source code for your reference.

Effect:

When not selected: When selected:

Picture background:

checkboxSel.jpg

checkboxNoSel.jpg

Code:

html code snippet:

Copy code

The code is as follows:

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;
}

Distinguish each one Hyperlinks are not explained in many ways. In fact, similar radio button buttons can also be easily implemented in this way, thus saving time.