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
Copy the following code into your <HEAD></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 between the <BODY></BODY> tags 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