JQuery plugin for radiobuttons.

Hi everybody!

Since my blog is about .Net, here will be ASP.Net related themes including Javascript. And today I wanna share with you small plugin that allows youto create set of buttons with behavior like radio-buttons. Each button has hyperlink inside it, where user should click to select button.

I give this plugin name "buttonset". Main idea is to change elements style when they are selected or deselected.

This plugin has 2 methods: Initialize and GetSelected. First one get input options and initialize 'Click' handler for elements. Second one returns Id of selected element.

To init plugin, you need call:
  jQuery('#container').buttonset('Initialize');
, where container is parent element for all element which represent radiobuttons. For example:

<div id="container">
    <div class="selectedClass">
        <a id="Link1" href="">Link1</a>
    </div>
    <div class="defaultClass">
        <a id="Link2" href="">Link2</a>
    </div>
</div>

How it works. When user click on any element (hyperlink inside element which represent radiobutton), plugin go through all childred of parent container. If currently clicked element's Id equals ti Id of element in current .each step - then this Id is selected, otherwise it is deselected. This is like class toggling.To get selected Id, just check each element for it's class and return element with .selectedClass
Plugin source:

(function ($) {

    var methods = {

        Initialize: function () {

            $(this).delegate("a", "click", function () {
                var selectedId = $(this).attr('id');
                var container = $(this).parent().parent().parent();
                $(container).children("div").each(function () {
                    var currentId = $(this).find("a").attr("id");
                    if (selectedId == currentId) {
                        $(this).removeClass("defaultClass").addClass("selectedClass");
                    }
                    else {
                        $(this).removeClass("selectedClass").addClass("defaultClass");
                    }
                });
                return false;
            });
        },

        GetSelected: function () {
            var selectedId;

            $(this).find("a").each(function () {
                var container = $(this).parent().parent();
                $(container).children("div").each(function () {
                    var currentId = $(this).find("a").attr("id");
                    if ($(this).attr("class") == "selectedClass") selectedId = currentId;
                });
            });
            return selectedId;
        }
    };

    jQuery.fn.buttonset = function (method) {
        var buttonset = this;


        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.Initialize.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.buttonset');
        }
    };
})(jQuery)