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.com/2008/09/mutually-exclusive-checkboxes-with.html.

In my case, I have many checkbox groups on the same page, so I want it to work like this example. An asp.net codebehind example is here, but I want to do it in client side code.

How can I do this in JavaScript?

i have decided to use the ajax mutually exclusive checkbox extender. The solutions given so far are basically based on radio buttons. This link really helped me..http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-mutuallyexclusive-checkbox-extender

Answer 1

Using Mutual Checkboxes when there is Radio button is a bad idea but still you can do this as follows

HTML

<div>         Red: <input id="chkRed" name="chkRed" type="checkbox" value="red" class="checkbox">     Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue" class="checkbox">     Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green" class="checkbox"> </div>  <div>     Mango: <input id="chkRed" name="chkMango" type="checkbox" value="Mango" class="checkbox">     Orange: <input id="chkBlue" name="chkOrange" type="checkbox" value="Orange" class="checkbox">     Banana: <input id="chkGreen" name="chkBanana" type="checkbox" value="Banana" class="checkbox"> </div> 

Jquery

$('div .checkbox').click(function () {                   checkedState = $(this).attr('checked');                   $(this).parent('div').children('.checkbox:checked').each(function () {                       $(this).attr('checked', false);                   });                   $(this).attr('checked', checkedState); }); 

And here is fiddle

Answer 2

Like I said in my comment, you should really use <radio> elements for this. Give them the same name and they work almost the same way:

<label><input type="radio" name="option" value="Option 1">Option 1</label> <label><input type="radio" name="option" value="Option 2">Option 2</label> 

The only significant difference is that, once one of them is selected, at least one of them has to be on (ie, you can't uncheck them again).

If you really feel the need to do it with check boxes, remind yourself that users with JavaScript disabled will be able to select all the options if they like. If you still feel the need to do it, then you'll need to give each checkbox group a unique class name. Then, handle the change event of each checkbox element and uncheck all the other elements matching the same class name as the clicked element.