Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to allow only one checkbox to be checked?

Posted on 2012-04-05
11
Medium Priority
?
505 Views
Last Modified: 2012-06-21
Experts,

I have multiple checkboxes in my form and I need to ensure that only one of them is checked.  How can I do this using javascript?

I know that I can do the validation via PHP upon form submission but, I'd like to do the check on the fly.  I don't need to throw an alert but, rather I would like to make it so that if they check one box and then check another, the original check would move to the second box.

Example Form:

<form id="myform" name="myform" method="POST">
<input name="option1" type="checkbox" value="1" />
<input name="option2" type="checkbox" value="1" />
<input name="option3" type="checkbox" value="1" />
</form>
0
Comment
Question by:evibesmusic
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
11 Comments
 
LVL 3

Assisted Solution

by:tobyweston
tobyweston earned 1000 total points
ID: 37814431
Any reason why you would like checkboxes? Radio buttons would do the job just as well and would only require the "name" attribute to be the same for them to only make sure one is selected.

<form id="myform" name="myform" method="POST">
<input name="option" type="radio" value="1" />
<input name="option" type="radio" value="2" />
<input name="option" type="radio" value="3" />
</form>
0
 

Author Comment

by:evibesmusic
ID: 37814592
@tobyweston:

When I use the following it still allows me to select multiple radio buttons?

<form id="myform" name="myform" method="POST">
<input name="option" type="radio" value="1" />
<input name="option" type="radio" value="2" />
<input name="option" type="radio" value="3" />
</form>
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37814673
I don't think so...  Check to see if your code got updated.  Maybe you need to refresh the page.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:evibesmusic
ID: 37815043
@DaveBaldwin

Trust me, I think it is odd too but, this is exactly what's happening.  I've deleted all cookies, closed, and restarted the browser and FF still allows multiple radio buttons to be selected.

See the image below.

Multiple radio buttons select at once.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37815112
You'll have to show me the page code because I don't believe that it will happen if the code is right.  I've done too many already.  That pic means nothing to me.
0
 

Author Comment

by:evibesmusic
ID: 37815149
LOL...your response made me laugh. Take a look. This is the exact code from the generated source using FireBug.

<table cellspacing="2" cellpadding="2"><tr><td width="100px" rowspan="5" valign="top"><b>Choose One: </b><br />(click to preview)</td><td width="150px"><input name="general" type="radio" value="1" /> <div id="general" style="float:right;"><a href="scripts/bio_help_questions.php" title="Welcome Message - General">General</a></div></td><td></td></tr><tr><td><input name="onestop" type="radio" value="2" /> <div id="one_stop" style="float:right;"><a href="scripts/bio_help_questions.php" title="Welcome Message - One Stop Shopping">One Stop Shopping</a></div></td><td></td></tr><tr><td><input name="quality" type="radio" value="3" /> <div id="quality" style="float:right;"><a href="scripts/bio_help_questions.php" title="Welcome Message - Quality Information">Quality Information</a></div></td><td></td></tr><tr><td><input name="relationship" type="radio" value="4" /> <div id="relationship" style="float:right;"><a href="scripts/bio_help_questions.php" title="Welcome Message - Relationship">Relationship</a></div></td><td></td></tr><tr><td><input name="thank_you" type="radio" value="5" /> <div id="thank_you" style="float:right;"><a href="scripts/bio_help_questions.php" title="Welcome Message - Thank You">Thank You</a></div></td><td></td></tr></table>

Open in new window

0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 1000 total points
ID: 37815156
That's what I thought.  You missed the part where we said the 'name=' has to be the same on all the radio buttons in the group for it to allow only one at a time.  You have 5 radio buttons and 5 different names.  Pick one name and use it in all 5 radio buttons.

<input name="general" type="radio" value="1" />
0
 

Author Comment

by:evibesmusic
ID: 37815163
@DaveBaldwin

PS - I love your website! Quirky and so low tech. Obviously made a niche for yourself.

Thanks for all of your help Dave. Much appreciated!
0
 

Author Comment

by:evibesmusic
ID: 37815165
@DaveBaldwin:

Ahhh yes....the simple things get me all the time Dave.  Thanks for the closer look...maybe I should go to bed at night instead of coding. Might save myself some time...but heck...you wouldn't get easy points now would you.
0
 

Author Closing Comment

by:evibesmusic
ID: 37815169
Thanks Experts. Sleep is meant for night-time...not coding. Good night.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37815181
But Night time is Coding time!!  At least for me, it's nice and quiet.  Glad to help and glad you like my web site.  It is almost all just links for me to use so it doesn't need much.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question