Question

15

How can I make a group of checkboxes mutually exclusive?

rated 0 times [ 17] [ 2] / answers: 1 / hits: 78533 / 13 Years ago, thu, november 10, 2011, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tierra

Add To Favorites

Follow

Total Points: 705

Total Questions: 85

Total Answers: 96

Location: Maldives

Member since Sat, Jan 29, 2022

2 Years ago

answered 13 Years ago daja · Accepted Answer

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