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

上一篇: 解决html 图片img加超链接后产生... 下一篇:使select在选中/聚焦时列出所有选...

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

发布时间：2022-04-12 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了无需太多的代码利用超链接即可实现简单自定义漂亮复选框，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

今天突然就在想，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;
}

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

脚本宝典总结

以上是脚本宝典为你收集整理的无需太多的代码利用超链接即可实现简单自定义漂亮复选框全部内容，希望文章能够帮你解决无需太多的代码利用超链接即可实现简单自定义漂亮复选框所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：超链接超链接

上一篇: 解决html 图片img加超链接后产生... 下一篇:使select在选中/聚焦时列出所有选...

猜你在找的HTML/Xhtml相关文章

了解HTTP Headers的方方面面图文说明 2022-04-12
Html分层的box-shadow效果的示例代码 2022-04-12
html+css实现血轮眼轮回眼特效代码 2022-04-12
html实现随机点名器的示例代码 2022-04-12
HTML中table表格拆分合并(colspan、rowspan) 2022-04-12
HTML页面滚动时部分内容位置固定不滚动的实现 2022-04-12
HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手 2022-04-12
HTML通过表单实现酒店筛选功能 2022-04-12
HTML中的表单Form实现居中效果 2022-04-12
HTML+CSS制作心跳特效的实现 2022-04-12