How can I make a group of checkboxes mutually exclusive?

Question

I have to make mutually exculsive checkboxes. I have come across numerous examples that do it giving example of one checkbox group. One example is at http://blog.schuager.c

Answer 1

I guess this is what you want.

Consider the HTML below:

    My favourite colors are:

    

     Red

     Yellow

     Blue

     Orange

     Green

     Purple

Note that there's two names for color groups: red, yellow, blue and orage, green, purple

And this JavaScript noted below will work generically to all checkbox on the page.

jQuery("input[type=checkbox]").unbind("click");
jQuery("input[type=checkbox]").each(function(index, value) {
    var checkbox = jQuery(value);
    checkbox.bind("click", function () {
        var check = checkbox.attr("checked");
        jQuery("input[name=" + checkbox.attr('name') + "]").prop("checked", false);
        checkbox.attr("checked", check);
    });
});

Take a look at this LIVE example