JavaScript Forum

**soon** · 09-07-2007, 01:11 PM

Hi

For reasons that would take too long to explain, I need to make a group of three select boxes behave like radio buttons ie if you click one of the three, any previously selected one is deselected.

Anyone know of a javascript that would do this?

many thanks

tony

**hafio** · 09-08-2007, 12:33 AM

you can either use a function that will deselect all 3 textboxes and select back whatever you have clicked, or use the onCLICK event within each <INPUT> to uncheck the other 2 boxes.

**soon** · 09-08-2007, 06:27 AM

Many thanks!

best wishes

tony

**Tudor.b** · 09-19-2007, 06:32 AM

Why don't you just use radio buttons?

**soon** · 09-26-2007, 07:43 AM

Thanks everyone! Long story, but I found a way round it

best wishes

tony

**seannarae** · 04-01-2009, 06:37 PM

I am experiencing the same obstacle as the OP. So i would love to have seen the code used that solved it for them...

I have a group of checkboxes that i need to behave like radios, where only one at a time from the group can be checked at any one time. Checking one unchecks all others.

I cant use radios because i need the user to be able to remove their check, without having to use an UNCHECK ALL command. Once a radio from a group is clicked, users cannot uncheck.

Here's the JS i've found that seems promising...

Code:

<script type="text/javascript">
function unCheck(el, n){
el.form.elements[n].checked = false;
}
</script>

And here's a base example of a 3x checkbox group.

Code:

<input type="checkbox" id="check1" onclick="unCheck(this, 'check2','check3');">
<br>
<input type="checkbox" id="check2" onclick="unCheck(this, 'check1','check3');" >
<br>
<input type="checkbox" id="check3" onclick="unCheck(this, 'check1','check2');" >

Functionally, i can still check >1 box in this example. Only the 1st checkbox listed in the onclick is getting unchecked. Which may be a matter of syntax: how to pass >1.

But seeing as though i may have as many as 12x checkboxes (working with Months), is there a more efficient way to have any 1 checkbox uncheck all others? Just like a radio group would behave? Except for the ability for the user to uncheck?

Thanks...

**soon** · 06:56 PM

Hi Seannarae

I found something that worked in my context. You can see it here: http://www.internetevangelismday.com/church-site-design.php

For a couple of options I wanted a bigger choice than radio buttons.

best wishes

tony

**seannarae** · 04-01-2009, 06:58 PM

PARTIALLY RESOLVED

Turns out is was a syntax issue. Without changing anything in the JS, here's the way i'm passing >1 uncheck event:

Code:

<input type="checkbox" id="check1" onclick="unCheck(this, 'check2'); unCheck(this, 'check3');">
<br>
<input type="checkbox" id="check2" onclick="unCheck(this, 'check1'); unCheck(this, 'check3');">
<br>
<input type="checkbox" id="check3" onclick="unCheck(this, 'check1'); unCheck(this, 'check2');">

But i say PARTIALLY RESOLVED because while i seem to have a method that works, as i add checkboxes to the group, its going to get bloddy messy real quick.

Any suggestions on how to improve?

**logic ali** · 04-02-2009, 10:50 PM

Quote:

Originally Posted by seannarae

Any suggestions on how to improve?

Just follow the syntax used in this working example and there'll be no mess. The checkboxes in each group must have a common name:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Checkbox Groups Act As Radio Buttons (Don't ask)</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name='f1' action='#'>
 <p>
 <input type=checkbox name='cb1'>
 <input type=checkbox name='cb1'>
 <input type=checkbox name='cb1'>
 <input type=checkbox name='cb1'>
 <p>--------------
 <p>
 <input type=checkbox name='cb2'>
 <input type=checkbox name='cb2'>
 <input type=checkbox name='cb2'>
 <input type=checkbox name='cb2'>
</form>
<script type='text/javascript'>

function Cb2Rb( setRef )
{
 this.boxGroup = setRef;
   
 for( var i=0, len=setRef.length; i<len; i++ )
  setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);

 this.scan=function(index) 
 {
  if( this.boxGroup[ index ].checked )
   for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
    if( i != index )
     g[i].checked = false;
 }
  /*28432953637269707465726C61746976652E636F6D*/
}

new Cb2Rb( document.forms.f1.cb1 );
new Cb2Rb( document.forms.f1.cb2 );

</script>
</body>
</html>

**Mikeyks1** · 09-09-2011, 11:39 AM

I have modified this script a little and want to know if anybody knows how to complete this so that when a parent checkbox is unchecked the child checkboxes are automatically unchecked as well? Your help is appreciated.

Code:

<script type="text/javascript">

Code:

function toggleMe(a){
 var e=document.getElementById(a);
 if(!e)return true;
 if(e.style.display=="none"){
   e.style.display="block"
 } else {
   e.style.display="none"
 }
 return true;
}
</script>
<body>
<form name='f1' action='#'>
<h2 align="center">Test</h2><br>
<br>
<input type="checkbox" onclick="return toggleMe('para1')" value="1">1
<br>
<div id="para1" style="display:none">
&nbsp;&nbsp;&nbsp;<input type="checkbox" name="cb1" id="a"/>
 <label for="cb1">a</label><br>
&nbsp;&nbsp;&nbsp;<input type="checkbox" name="cb1" id="b"/>
 <label for="cb1">b</label>
<br>
</div>
<input type="checkbox" onclick="return toggleMe('para2')" value="2">2
<br>
<div id="para2" style="display:none">
&nbsp;&nbsp;&nbsp;<input type="checkbox" name="cb2" id="a"/>
 <label for="cb1">a</label><br>
&nbsp;&nbsp;&nbsp;<input type="checkbox" name="cb2" id="b"/>
 <label for="cb2">b</label>
<br>
</div>
<script type='text/javascript'>
function Cb2Rb( setRef )
{
this.boxGroup = setRef;
for( var i=0, len=setRef.length; i<len; i++ )
 setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
this.scan=function(index)
{
 if( this.boxGroup[ index ].checked )
  for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
   if( i != index )
    g[i].checked = false;
}
}
new Cb2Rb( document.forms.f1.cb1 );
new Cb2Rb( document.forms.f1.cb2 );
</script>
<script type='text/javascript'>
function sub_delete{ 
       if (typeof document.checks.cb.length === 'undefined') { 
  /*then there is just one checkbox with the name 'cb' no array*/ 
       if (document.checks.cb.checked == true ) 
                           { 
                               document.checks.submit(); 
                               return 0; 
                           }    
   }else{ 
 /*then there is several checkboxs with the name 'cb' making an array*/ 
       for(var i = 0, max = document.checks.cb.length; i < max; i++){ 
           if (document.checks.cb[i].checked == true ) 
                           { 
                               document.checks.submit(); 
                               return 0; 
                           } 
 
       } 
   } 
   }//sub_delete end 
</script>
<br><br><br>
<input type="button" class="button" onclick="return toggleMe('para10')" value="Submit">

**chrishirst** · 09-09-2011, 01:49 PM

You do realise this is a VERY old thread.

however; with a self promoting link drop you can have Select or Unselect all checkboxes

**Mikeyks1** · 09-09-2011, 03:47 PM

OOP's I should have started another thread. I forgot to check the dates