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

任何人都知道有jQuery验证的自定义单选按钮/复选框实现？

1 个答案: