jquery - 任何人都知道有一个带有 jQ​​uery 验证的自定义单选按钮/复选框实现吗？

Question

任何人都做过风格化的单选按钮、复选框，甚至可能与 jQuery 验证一起使用的下拉菜单？

示例：如果我勾选所需的自定义样式复选框，隐藏的实际复选框会检查并触发重新验证。

Answer 1

由于没有答案，因此深入研究了它。

这是我所拥有的，仍然非常基本但可以工作，请随时改进代码。

(function ($) {
    $.fn.styliseForm = function () {

        var inputs = this.find('input[type=checkbox], input[type=radio]');

        inputs.each(function () {
            var t = $(this),
            type = '',
            cl = 'hdn';
            if (t.is(':checkbox')) {
                type = 'checkbox';
            }
            if (t.is(':radio')) {
                type = 'radio';
            }
            if (t.is('checked')) { cl = 'b-hdn active'; }
            t.before('<span class="b-' + type + '" data-name="' + t.attr('name') + '" />').addClass(cl);
        });

        $('.b-radio, .b-checkbox').each(function () {
            var t = $(this),
            next = t.next(),
            inputGroup = $('input[name=' + t.attr('name') + ']');

            t.click(function () {
                if (t.is('.b-radio')) {
                    $('span[data-name=' + t.attr('data-name') + ']').removeClass('active');
                    t.addClass('active');
                    next.attr('checked', true);
                    inputGroup.not(next).attr('checked', false);
                }
                if (t.is('.b-checkbox')) {
                    t.toggleClass('active');
                    next.attr('checked', t.hasClass('active'));
                    if (next.attr('class').indexOf('{') > -1 && t.hasClass('active')) { next.valid(); }
                }
            });

            if (next.is(':checked')) {
                t.addClass('active');
            }
        });
    }
})(jQuery);

$('#exampleForm').styliseForm();