关于iCheck 单选框的事件绑定

最新推荐文章于 2021-03-07 14:18:37 发布

wangs1996

最新推荐文章于 2021-03-07 14:18:37 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/wangs1996/article/details/73382183

JavaScript jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在使用iCheck这款基于JQUERY & ZEPTO的美化单选框和复选框插件时，遇到的事件绑定问题。作者在尝试使选中单选框后触发进度条变化的事件时遇到困难，发现iCheck将input标签替换为了ins标签，从而找到了正确绑定事件的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iCheck是一款基于JQUERY & ZEPTO的美化单选框和复选框的插件，效果还是不错的。
可以参考官网：http://www.bootcss.com/p/icheck/
下载插件的网站：https://github.com/fronteed/iCheck
用的时候引入对应的css js 然后设置几个参数很方便。
但是在实践操作的时候，遇到了一个小问题。

想实现的效果：选中对应的单选框之后，右侧的进度条跟着有所变化。
基本原理则是选中单选框后触发进度条改变的事件

$(document).ready(function () {
    var i = 0;
    var count = 0;
    var total = $("#total").html();

    $(".tiao").css("width", i + "%").html(count + "/" + total);

    $("input").click(function () {
        var index = $(this).prev();
        if ($("input[name=" + index[0].name + "]").is(":checked")) {
            if (i < 100) {
                count++;
                i = (count / total) * 100;
                $(".tiao").css("width", i + "%").html(count + "/" + total);
                if (count == total) {
                    $(".ok").css("display", "block");
                }
            } else {
                i = 100;
            }
        }
    })
});