不用太多的编码运用超连接便可完成简易自定好

今日忽然就在想,html中的复选框可变更的款式比较有限,并且如今制做1个复选框必须写许多编码,随后我就想起1个简易的完成方法。彻底证实了这是可行的。多的不说,立即贴出源码,供大伙儿参照。

完成实际效果:

未选定时:选定时:

照片情况:

checkboxSel.jpg

checkboxNoSel.jpg

编码:

html编码片断:

拷贝编码
编码以下:

<a name="checkWeek" class="divCheckBoxNoSel"></a> 周1

javaScript编码片断:

拷贝编码
编码以下:

$("a[name='checkWeek']").click(function(){
if($(this).hasClass('divCheckBoxSel')){
$(this).removeClass('divCheckBoxSel');
}else{
$(this).addClass('divCheckBoxSel');
}
});

css编码片断:

拷贝编码
编码以下:

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

区别每个超连接就不在做出表明了能够有许多种方法,具体上内似的像单选框按钮还可以这模样轻轻松松完成,从而节约時间。