Website Design Edmonton       Website Design Feedback       Website Design Sitemap     Contact Website Design Company
Website Designers R Us - Home
Finding the value of a checkbox

Checkboxes allow you to receive multiple values. Like radio buttons, all checkboxes in a set have the same name but different values. However, unlike radio buttons, a visitor is free to choose one or more checkboxes.

Let's see how we can extract the value of a checkbox.

<FORM NAME="orderform">
What kind/s of music do you listen to?<BR>
<INPUT TYPE="CHECKBOX" NAME="music" VALUE="Rock" CHECKED>
Rock<BR>
<INPUT TYPE="CHECKBOX" NAME="music" VALUE="Reggae">
Reggae<BR>
<INPUT TYPE="CHECKBOX" NAME="music" VALUE="Pop">
Pop<BR>
<INPUT TYPE="CHECKBOX" NAME="music" VALUE="Rap">
Rap<BR>
<INPUT TYPE="CHECKBOX" NAME="music" VALUE="Metal">
Metal<BR>
<INPUT TYPE="SUBMIT" onclick="get_check_value()">
</FORM>

orderform above contains a set of five checkboxes called music. To get the associated value/s, we'll use the following code:

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

function get_check_value()
{
var c_value = "";
for (var i=0; i < document.orderform.music.length; i++)
   {
   if (document.orderform.music[i].checked)
      {
      c_value = c_value + document.orderform.music[i].value + "\n";
      }
   }
}

//-->
</SCRIPT>


We first initialize a variable c_value that will hold the values of the selected checkboxes. document.orderform.music.length determines the number of checkboxes with the name music. In our case, we can substitute this with 5, since we already know the number. The for loop iterates through all the checkboxes in that set and determines which of these is checked using an If statement. Once a selected checkbox is found, its value is appended to the c_value variable.
This code should be placed inside the HTML Head section (unless you know what you are doing).
Return to Listing

Website Designer R Us has over 12 years of IT experience and a focus on custom website design, web development and web hosting services. Our professional web design services will give your business the look and feel needed to beat your competitors! Our website design services include; web design, website redesign, website maintenance, web development, flash animation, eCommerce, shopping carts, domains, web hosting, search engine optimization, graphic design, logo design, blog writing, script installations & much more!
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

Copyright © 2006-2011 Website Designers R Us, a DOT Specialist Company. All rights reserved.