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:
javaScript code snippet:
$("a[name='checkWeek']").click(function(){
if($(this).hasClass('divCheckBoxSel')){
$( this).removeClass('divCheckBoxSel');
}else{
$(this).addClass('divCheckBoxSel');
}
});
css code snippet:
.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.
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn