Question

I am trying to create my own styled checkbox jQuery plugin. What I want to do is hide the check-box which is working and append a span after the check-box but the span is not adding after the check-box. Why is this?

SETUP

var checkBox1 = $("<input type='checkbox'/>");
$(checkBox1).genCheckBox();
$(divBGContainer).append(checkBox1);

PLUGIN

(function($) {

    $.fn.genCheckBox = function(settings) {

        var def = {

            height: 15,
            width: 15

        };


        $(this).css("display", "none");


        var span = $("<span/>");
        $(span).insertAfter(this);

    }

})(jQuery);

Answer 1

The problem is probably you selector. I guess you want to get all checkboxes on your page and turn them into your custom checkboxes, right?

Try this instead:

$("input[type='checkbox']").genCheckBox();

Edit:

Notice that you probably want to make sure that your plugin can receive more than one element. So you should probably loop over the elements, and perform your actions on them one by one.

Something like this:

(function($) {

    $.fn.genCheckBox = function(settings) {
        var def = {
            height: 15,
            width: 15
        };

        this.each(function() {
           $(this).hide();
           $("<span/>").insertAfter(this);
        });
    }
})(jQuery);