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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I create multiple exclusive checkbox groups?

Checkboxes

How do I create multiple exclusive checkbox groups?

by  1Oracle  Posted    (Edited  )
Add a "grouping" attribute to the checkboxes you want to behave as a group. Although the attribute won't be a valid attribute of the element "input", the browser should allow it.

Here is a function and html that works. Note the "groupKey" attribute that brings checkboxes together:

<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>
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top