Question

I built a jquery plugin to which I’m passing the ID of an HTML checkbox as a parameter:

$("div.plugin").pluginname({
      chckBoxID: "chk" + $(this).attr("id")
});

The plugin generates an image link

(function( $ ){ 

    $.fn.extend({   

        pluginname: function(options){

            var defaults = {
                chckBoxID: ""
            }
            var options = $.extend(defaults, options);
            var o = options;
            $("div#" + imageDiv).html("<a><img src='images/x.gif'></img></a>");
        }
    });
});

By default, the checkbox is not checked.

What I want to do is:

(1) When the user clicks/checks the checkbox, the image link should open a new browser window.

(2) When the user unchecks the checkbox, the image link should not open a new browser window.

Your help is appreciated.

An update to my code —

HTML Code looks like this

<div>
    <input type="checkbox" id="chk1" />
</div>
<div class="plugin" id="1"></div>

<a><img> is generated by the plugin

$(this).html("<a><img src='images/x.gif'></img></a>");

Answer 1

You can’t use $(this) the way you’re passing it into the plugin. You CAN do something like this though:

$("div.plugin").each(function (i) {
    $(this).pluginname({
      chckBoxID: "chk" + $(this).attr("id")
    });
});

Then I believe what you’re trying to do in your plugin is something like this:

(function ($) {
    $.fn.pluginname = function (options) {
        var opts = $.extend({}, $.fn.pluginname.defaults, options);

        var pluginnameClick = function (e) {
            if ($("#" + opts.chckBoxID).is(":checked")) {
                e.preventDefault();
                window.open($(this).attr('href'));
            }
        };

        $(this).each(function (i) {
            $('a', $(this)).bind("click", pluginnameClick);
        });
    };

    $.fn.pluginname.defaults = {
        chckBoxID: "chk"
    }
})(jQuery);

This assumes your HTML code looks something like this:

<div class="plugin" id="1">
    <a href="link1.htm"><img src="image.jpg" /></a>
    <input type="checkbox" id="chk1" />
</div>
<div class="plugin" id="2">
    <a href="link2.htm"><img src="image.jpg" /></a>
    <input type="checkbox" id="chk2" />
</div>