Click here to Skip to main content
14,299,849 members
Rate this:
Please Sign up or sign in to vote.
See more:
I want a functionality using JS where my checkboxes will act something like radio buttons..

here i am pasting an example of the code..
<script>
function get()
{
 for (var loop=1; loop<=5; loop++)

                    {

                        if(document.getElementById('f'+loop).checked==true)

                        {

                            for (var loop1=1; loop1<=5; loop1++)

                            {

                                if(document.getElementById('f'+loop).id==document.getElementById('f'+loop1).id)

                                {

                                        document.getElementById('f'+loop1).checked = true;

                                }

                                else

                                {

                                        document.getElementById('f'+loop1).checked = false;

                                }

                            }

                        }

                    }



}

</script>
<input name="f[]" type="checkbox" id="f1" value="1" onClick="get()"/>
<input name="f[]" type="checkbox" id="f2" value="2" onClick="get()"/>
<input name="f[]" type="checkbox" id="f3" value="3" onClick="get()"/>
<input name="f[]" type="checkbox" id="f4" value="4" onClick="get()"/>
<input name="f[]" type="checkbox" id="f5" value="5" onClick="get()"/>



Now the point is that i can traverse it backwards like the radiobutton but i fail to do the same from top to bottom.. if some one of you would like to take a look then kindly copy and paste the code and see the problem. Simply what i want is that just one check should be selected from the group at one time..
Thanks in Advance..
:)
Posted
Rate this:
Please Sign up or sign in to vote.

Solution 1

See, you need to do something like:
1. Have a checkchanged event of client side.
2. In that even, first uncheck all the checkboxes of that group
3. check the checkbox that invoked that event.

There will be no issue of naming conventions in these steps. Step 1 would be done for all. Step 2 would be a generic uncheck all. Step 3 is simple check the one that triggered the event.

You have mixed Step 2 & 3 - creating issues. Just do it separately and all will be fine.
   
Rate this:
Please Sign up or sign in to vote.

Solution 2

@Sandeep..
Thanks for your reply but sandeep i couldn't make it..
Can you kindly give me some solution by an example..
   
Comments
Christian Graus 24-May-10 7:46am
   
Please don't use the 'answer' button to ask questions. Why don't you just use radio buttons ? Anyhow, you have an answer, it's clear what you have to do, if you don't know how to do it, go to the job board and pay a programmer to do it for you. Unless you post an example of your attempt to do it., we're bound to assume you're too lazy or too incompetent to even try, and there's no value in us writing code for people like that.
Rate this:
Please Sign up or sign in to vote.

Solution 3

Christian here you go..I have found out multiple ways of doing it but for you i was looking for something much more optimized. And listen just join some Etiquette classes coz you are badly in need of that.. Next time if you dont like the post dont reply on any but kindly keep your mouth shut.. If you are even a genius keep your mouth stiched coz you never know what is the guy on other side..
Got it..
Here are the answers for you..


Answer no 1:
<script>
var varPreviousSelectedID;

function get()
{
var get;
var varCheckboxes = document.getElementsByTagName('input');

for (var loop = 0; loop <=varCheckboxes.length; loop++) {

if (varCheckboxes(loop).checked == true) {



if (varPreviousSelectedID) {

if (varPreviousSelectedID == varCheckboxes(loop)) {

varCheckboxes(loop).checked = false;

}

else {

varPreviousSelectedID.checked = false;

varPreviousSelectedID = varCheckboxes(loop);

varCheckboxes(loop).checked = true;

}

}

else {

varPreviousSelectedID = varCheckboxes(loop);

}

}

}

}

</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

1<input name="faa1" type="checkbox" id="f1" value="1" onClick="get()"/>
2<input name="faa1" type="checkbox" id="f2" value="2" onClick="get()"/>
3<input name="faa1" type="checkbox" id="f3" value="3" onClick="get()"/>
4<input name="faa1" type="checkbox" id="f4" value="4" onClick="get()"/>
5<input name="faa1" type="checkbox" id="f7" value="5" onClick="get()"/>
6<input name="faa1" type="checkbox" id="f5" value="6" onClick="get()"/>
7<input name="faa1" type="checkbox" id="f6" value="7" onClick="get()"/>
8<input name="faa1" type="checkbox" id="f8" value="8" onClick="get()"/>
<body>
</body>
</html>



Answer No 2:
<!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;

 }

}



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

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



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



Answer No 3:
<script>
function get(ID)
{

var get;
for (var loop = 1; loop <= 5; loop++) {

if (document.getElementById('f' + loop).id != ID) {

document.getElementById('f' + loop).checked = false;

}

else

{

document.getElementById('f' + loop).checked = true;

}

}

}

</script>
</script>
<!



DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<input name="f[]" type="checkbox" id="f1" value="1" onClick="get('f1')"/>
<input name="f[]" type="checkbox" id="f2" value="2" onClick="get('f2')"/>
<input name="f[]" type="checkbox" id="f3" value="3" onClick="get('f3')"/>
<input name="f[]" type="checkbox" id="f4" value="4" onClick="get('f4')"/>
<input name="f[]" type="checkbox" id="f5" value="5" onClick="get('f5')"/>
<body>
</body>
</html>
   
Comments
Christian Graus 24-May-10 8:02am
   
Which part of 'don't push the answer button to ask questions' was confusing for you ?
Johnny J. 24-May-10 8:33am
   
all of it, it looks like...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100