Select One 2 Javascript

Javascripts > Javascript Forms > Select One 2

Script Title: Select One 2

Description: This scripts demonstrates how I limited only one selection by deselecting all others and how you can retrieve the value of the box you are selecting.

Example: Available

Credit: Script created by Mike Best

Copy the following code into your HEAD tags.

<script language="javascript"> // by Mike Best mike.best@hei-usa.com // More scripts like this at http://www.java-scripts.net // Check Box Validater only one selection allowed function checkBoxValidate(cb,gp,grp){ if(grp=="g1"){ var gn=gp.g1 var len=4 var lx=gp.v1 } if(grp=="g2"){ var gn=gp.g2 var len=4 var lx=gp.v2 } for (j=0; j < len ; j++ ){ if(gn[j].checked==true){ gn[j].checked = false } if(j == cb){ gn[j].checked=true lx.value=gn[j].value } } } </script>

Copy the following code into the BODY of your html page.

<form name=myform method=post> <table border=1 width='90%' align=center> <tr> <td width='50%' align=center><font face=ARIAL,VERDANA size=2>Value <input type='text' name='v1'> </td> <td width='50%' align=center><font face=ARIAL,VERDANA size=2>Value <input type='text' name='v2'></td> </tr> <tr> <td width='50%' align=center><font face=ARIAL,VERDANA size=2> <center> Group 1<br> Selection 1<input value=3.45 type="checkbox" name="g1" onClick="javascript:checkBoxValidate(0,this.form,this.name)" value="ON"><br> Selection 2<input value=5.66 type="checkbox" name="g1" onClick="javascript:checkBoxValidate(1,this.form,this.name)" value="ON"><br> Selection 3<input value=7 type="checkbox" name="g1" onClick="javascript:checkBoxValidate(2,this.form,this.name)" value="ON"><br> Selection 4<input value=100.56 type="checkbox" name="g1" onClick="javascript:checkBoxValidate(3,this.form,this.name)"> </center> </td> <td width='50%' align=center><font face=ARIAL,VERDANA size=2> Group 2<br> Selection 5<input value="This" type="checkbox" name="g2" onClick="javascript:checkBoxValidate(0,this.form,this.name)" value="ON"><br> Selection 6<input value="is" type="checkbox" name="g2" onClick="javascript:checkBoxValidate(1,this.form,this.name)" value="ON"><br> Selection 7<input value="a" type="checkbox" name="g2" onClick="javascript:checkBoxValidate(2,this.form,this.name)" value="ON"><br> Selection 8<input value="Test" type="checkbox" name="g2" onClick="javascript:checkBoxValidate(3,this.form,this.name)"><br> </td> </tr> </table> </form>

Enter your name and email address to have this script sent right to your Inbox for later viewing.

First Name Last Name Email

<reallybig.com>
Web Builder Network Portal

WebBuilderZone
The Largest directory of Web Building resources on the 'Net!

Reallybig Forums
Ask a question, join a discussion, start a thread.

Bignosebird
FREE CGI scripts, Web tutorials, essential HTML tricks and more!

Fontpool
1000+ Truetype fonts for PC & MAC!

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

DHTMLShock
Add life to your site with these DHTML scripts!

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!

Sitecritique.net
Friendly community where you can get a site critique - or give one!

Advertise
on the
Reallybig.com
Network