首页 / HTML / 无需太多的代码利用超链接即可实现简单自定义漂亮复选框

无需太多的代码利用超链接即可实现简单自定义漂亮复选框

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了无需太多的代码利用超链接即可实现简单自定义漂亮复选框，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1060字，纯文字阅读大概需要2分钟。

内容图文

今天突然就在想，html中的复选框可更改的样式有限，而且现在制作一个复选框需要写很多代码，然后我就想到一个简单的实现方式。完全证明了这是可行的。多的不说，直接贴出源代码，供大家参考。

实现效果：

未选中时：无需太多的代码利用超链接即可实现简单自定义漂亮复选框 - 文章图片选中时：无需太多的代码利用超链接即可实现简单自定义漂亮复选框 - 文章图片

图片背景：

无需太多的代码利用超链接即可实现简单自定义漂亮复选框 - 文章图片checkboxSel.jpg

无需太多的代码利用超链接即可实现简单自定义漂亮复选框 - 文章图片checkboxNoSel.jpg

代码：

html代码片段:

代码如下:

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

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

区分每一个超链接就不在做出说明了可以有很多种方式,实际上内似的像单选框按钮也可以这样子轻松实现，从而节省时间。

内容总结

以上是互联网集市为您收集整理的无需太多的代码利用超链接即可实现简单自定义漂亮复选框全部内容，希望文章能够帮你解决无需太多的代码利用超链接即可实现简单自定义漂亮复选框所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/386080.html

来源：【匿名】