[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 507
  • Last Modified:

How to allow only one checkbox to be checked?

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
evibesmusic
Asked:
evibesmusic
  • 6
  • 4
2 Solutions
 
tobywestonCommented:
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
 
evibesmusicAuthor Commented:
@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
 
Dave BaldwinFixer of ProblemsCommented:
I don't think so...  Check to see if your code got updated.  Maybe you need to refresh the page.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
evibesmusicAuthor Commented:
@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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
evibesmusicAuthor Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
evibesmusicAuthor Commented:
@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
 
evibesmusicAuthor Commented:
@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
 
evibesmusicAuthor Commented:
Thanks Experts. Sleep is meant for night-time...not coding. Good night.
0
 
Dave BaldwinFixer of ProblemsCommented:
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now