jquery - jQuery検証を使用したカスタムラジオボタン/チェックボックスの実装があることを知っている人はいますか？

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();