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

Try this:

HTML

    Car: 
    Moto: 
    Byke: 
    Feet: 


    
    Red: 
    Blue: 
    Green: 

    Mango: 
    Orange: 
    Banana: 

​JavaScript/jQuery

$(':checkbox.radiocheckbox').click(function() {
    this.checked
        && $(this).siblings('input[name="' + this.name + '"]:checked.' + this.className)
                  .prop('checked', false);
});​

Mutually exclusive checkboxes are grouped by container+name+classname. You can use different groups in same container and also mix exclusive with non-exclusive checkbox with same name. JavaScript code is highly optimized. You can see a working example.