Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Mutual Exclusive CheckBox

Status
Not open for further replies.
newbee1981

newbee1981

Programmer
Feb 21, 2008
8
US
I had my previous post where I had a function which was not working for firefox.
Now to elaborate what I want to do is:
I am dynamically creating checkbox.
Say I have 5 checkbox and I want to achieve mutual exclusiveness in those check boxes.
Example:
my checboxes:

a
b
c
d<mex>

Now what I want is if I have the above
If the user click on the anycheckbox that has mex has the value then I want to uncheck all others. and also the vice versa if the user click any checkbox that does not contain the word mex then uncheck the one containing mex.
I hope I am clear.
 
Sort by date Sort by votes
Add your comments to your previous thread rather than starting a new one which has no context.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo
 
Upvote 0 Downvote
actually there was some problem with the thread so I had to start with the new one.

Also I had some problem with the code I implemented.
If you see my code. I am doing :
document.getElementsByTagName('input');
and then checking oInputs.type == 'checkbox'

and the problem comes if you have 2 questions on same page that require mutual exclusiveness then my code does not work.
Any suggestions.
 
Upvote 0 Downvote
newbee1981 -
Hi! Good work so far. I wrote an FAQ to help you with this, but can't see how to "point you to it."

The secret is to add a common grouping attribute to each checkbox. I used "groupKey='Colors'" for example.

Here is the code and html to test it:
<html>
<head>
<title>Mutual Exclusive Checkboxes</title>
<script type="text/javascript">
function swapCheck(checkBox)
{
if (checkBox)
{
var oInputs = document.getElementsByTagName('input');
var ckb;
var group = checkBox.groupKey;
for (var i = 0; i < oInputs.length; i++)
{
if (oInputs.type == 'checkbox')
{
ckb = oInputs;
if (ckb.groupKey && ckb.groupKey == group)
{
if (ckb.id != checkBox.id)
{
ckb.checked = false;
}
}
}
}
}
}
</script>
</head>
<body>
<form id="Form1" method="post" action="">
<div>
Colors<br />
<input type="checkbox" id="Checkbox1" onclick="swapCheck(this);" groupKey="Colors" title="Red" value="red" />Red<br />
<input type="checkbox" id="Checkbox2" onclick="swapCheck(this);" groupKey="Colors" title="Yellow" value="yellow" />Yellow<br />
<input type="checkbox" id="Checkbox3" onclick="swapCheck(this);" groupKey="Colors" title="Blue" value="blue" />Blue<br />
<input type="checkbox" id="Checkbox4" onclick="swapCheck(this);" groupKey="Colors" title="Violet" value="violet" />Violet<br />
<input type="checkbox" id="Checkbox5" onclick="swapCheck(this);" groupKey="Colors" title="Orange" value="orange" />Orange<br />
</div>
<div>
Fruits<br />
<input type="checkbox" id="Checkbox6" onclick="swapCheck(this);" groupKey="Fruits" title="Apple" value="apple" />Apple<br />
<input type="checkbox" id="Checkbox7" onclick="swapCheck(this);" groupKey="Fruits" title="Banana" value="banana" />Banana<br />
<input type="checkbox" id="Checkbox8" onclick="swapCheck(this);" groupKey="Fruits" title="Blueberry" value="blueberry" />Blueberry<br />
<input type="checkbox" id="Checkbox9" onclick="swapCheck(this);" groupKey="Fruits" title="Grape" value="grape" />Grape<br />
<input type="checkbox" id="Checkbox10" onclick="swapCheck(this);" groupKey="Fruits" title="Orange" value="orange" />Orange<br />
</div>
</form>
</body>
</html>
 
Upvote 0 Downvote
Hey 1Oracle
I am using asp.net and not html checkboxes so there is no group key property in that.

I have the code which works good if I have one question with 5 multiple choices in the page.
But that code gives me problem with 2 multiple questions on the page. Here is the code which you might want to have a look at:
<script type="text/javascript">
var checkBoxes = new Array;
function setup(e)
{
var oInputs = document.getElementsByTagName('input');
for ( i = 0; i < oInputs.length; i++ )
{
// loop through and find <input type="checkbox"/>
if ( oInputs.type == 'checkbox')
{
checkBoxes.push( oInputs ); // found one - store it in the oTextBoxes array
// oInputs.addEventListener("click", checkboxClicked, false);
if (document.addEventListener)
{
oInputs.addEventListener("click", checkboxClicked, false);
}
else if(document.attachEvent)
{
oInputs.attachEvent("onclick", checkboxClicked);
}
}
}
}

function checkboxClicked(e)
{
//Browser Detect for IE,Firefox and Netscape.
if (window.event) e = window.event;
var node = e.srcElement? e.srcElement : e.target;
if (node.checked)
{
// Was a mex clicked?
if (node.nextSibling.innerHTML.toUpperCase().indexOf("MEX") > 0)
{
for ( i = 0; i < checkBoxes.length; i++ )
{
// uncheck everything except the one the user selected.
if (checkBoxes != node && checkBoxes.nextSibling.innerHTML.toUpperCase().indexOf("MEX") < 0)
checkBoxes.checked = false;
}
}
else
{
// A mex one was not selected so uncheck any mex ones that are checked
for ( i = 0; i < checkBoxes.length; i++ )
{
// uncheck everything except the one the user selected.
if (checkBoxes != node && checkBoxes.nextSibling.innerHTML.toUpperCase().indexOf("MEX") > 0)
checkBoxes.checked = false;
}
}
}
}
</script>
 
Upvote 0 Downvote
Working with asp.net controls through javascript is full of headaches, as you are finding out.

I'd suggest placing all of your check boxes into a user control, exposing the properties you need to the page from this control, and adding all the validation logic to this control as well. Then you have all your behavior for this list of check boxes encapsulated in this single component, and can reuse it wherever you want.

Have a look at this:
Also, there is a forum for asp.net: forum855

Hope this helps,

Alex

[small]----signature below----[/small]
Majority rule don't work in mental institutions

My Crummy Web Page
 
Upvote 0 Downvote
thats fine. I know about user controls and asp.net forum
Just wanted to solve my issue through javascript itself.
So just wanted some suggestions and inputs for my code that I implemented.
 
Upvote 0 Downvote
Hi guys, can 1Oracle's solution be made to work with Firefox somehow?

I used it for this page:
....which works beautifully with viewed in Internet Explorer but not in Firefox.

Appreciate any comments?

Thanks
Wook.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

CoolBreeze007
  • Locked
  • Question
jquery ui radio buttons will not accept selected checkbox
Replies
1
Views
96
Offera
Offera
damipera
  • Locked
  • Question
Checkboxes - At Least 1 is Selected? 1
Replies
2
Views
101
damipera
damipera
Ihechi
  • Locked
  • Question
Either check a checkbox or fill out the textboxes in Gridview with JS. Any ideas how?
Replies
5
Views
158
Ihechi
Ihechi
jason.lex
  • Locked
  • Question
How do I edit this code to also count the checkboxes checked and total values
Replies
3
Views
115
jason.lex
jason.lex
tshad
  • Locked
  • Question
attribute for checkbox not valid
Replies
6
Views
128
mikrom
mikrom

Part and Inventory Search

Sponsor

Back
Top