• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    无需太多的代码利用超链接即可实现简单自定义漂亮复选框
    今天突然就在想,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;
    }

    区分每一个超链接就不在做出说明了可以有很多种方式,实际上内似的像单选框按钮也可以这样子轻松实现,从而节省时间。
    上一篇:使select在选中/聚焦时列出所有选项目前比较好的处理方式
    下一篇:解决html 图片img加超链接后产生难看的蓝色边框问题
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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