Make Checkbox behave like Radio button

Question

5.00/5 (1 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..

XML

<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 23-May-10 22:59pm

khanishfaq82

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sandeep Mewara · Answer 1 · 2010-05-23T23:16:00

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.

khanishfaq82 · Answer 2 · 2010-05-24T01:44:00

Solution 2

@Sandeep..
Thanks for your reply but sandeep i couldn't make it..
Can you kindly give me some solution by an example..

Posted 24-May-10 1:44am

khanishfaq82

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.

khanishfaq82 · Answer 3 · 2010-05-24T02:00:00

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:

XML

<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:

XML

<!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:

XML

<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>

Make Checkbox behave like Radio button

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0