jQuery CheckBox CSS复选框样式美化插件代码下载
2016-01-21 10:17:16  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 6204
• 1

分享一个表单美化过的Checkbox Demo、该特效是一款基于Bootstrap3实现的Checkbox元素美化的jQuery插件、可以直接下载使用、一共有4个index.html页面、可以根据自己项目的需要选择性的集成到自己的项目里面、下面的Checkbox插件的运行效果图、有需要的哥们可以直接下载使用

HTML代码

<div id="colors-1" class="col-xs-12">
    <span class="checkbox color_1 col-xs-4 col-sm-3">
        <label> <input type="checkbox"></label>
        <label> <input type="checkbox" value="x" checked=""></label>
    </span>

    <span class="checkbox color_2 col-xs-4 col-sm-3">
        <label> <input type="checkbox"></label>
        <label> <input type="checkbox" value="x" checked=""></label>
    </span>

    <span class="checkbox color_3 col-xs-4 col-sm-3">
        <label> <input type="checkbox"></label>
        <label> <input type="checkbox" value="x" checked=""></label>
    </span>

    <span class="checkbox color_4 col-xs-4 col-sm-3">
        <label> <input type="checkbox"></label>
        <label> <input type="checkbox" value="x" checked=""></label>
    </span>

    <span class="checkbox color_5 col-xs-4 col-sm-3">
        <label> <input type="checkbox"></label>
        <label> <input type="checkbox" value="x" checked=""></label>
    </span>

    <span class="checkbox color_6 col-xs-4 col-sm-3">
        <label> <input type="checkbox"></label>
        <label> <input type="checkbox" value="x" checked=""></label>
    </span>

    <span class="checkbox color_7 col-xs-4 col-sm-3">
        <label> <input type="checkbox"></label>
        <label> <input type="checkbox" value="x" checked=""></label>
    </span>
</div>

JS代码

$(function(){
    $(´.color_1 input[type="checkbox"]´).simpleBtChecks({ size: "x-2" }); 
    // default bt class: ´btn btn-default´

    $(´.color_2 input[type="checkbox"]´).simpleBtChecks({ 
        size: ´x-2´,
        class : ´btn btn-primary´ 
    });
    $(´.color_3 input[type="checkbox"]´).simpleBtChecks({ 
        size: ´x-2´,
        class : ´btn btn-success´ 
    });
    $(´.color_4 input[type="checkbox"]´).simpleBtChecks({ 
        size: ´x-2´,
        class : ´btn btn-info´ 
    });
    $(´.color_5 input[type="checkbox"]´).simpleBtChecks({ 
        size: ´x-2´,
        class : ´btn btn-warning´ 
    });
    $(´.color_6 input[type="checkbox"]´).simpleBtChecks({ 
        size: ´x-2´,
        class : ´btn btn-danger´ 
    });
    $(´.color_7 input[type="checkbox"]´).simpleBtChecks({ 
        size: ´x-2´,
        class : ´btn btn-link´ 
    });
});

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1ISe42 密码: 5bbf

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛