Get Multiple Checkbox Values in JavaScript | Code Snippet

16 Feb , 2013  Code Snippets 

Get Multiple Checkbox Values In JavaScriptCode Snippet #2: The code we created today is to get multiple checkbox values in JavaScript. This code snippet would help you know how to fetch the values passed using checkboxes in HTML forms upon the form submission.

In our previous code snippet we saw how to enable and disable a text area using jQuery. The code snippet we see today is again based on HTML form validation and is quite simple. Form validation is an important part of a client side validation and it is an important thing to perform on a web development using PHP, JAVA or any other web based technologies where forms play a critical role.

DEMO:

The Code Snippet:

HTML [The Form]:

JavaScript:

The JavaScript is self descriptive. When the form submit button is clicked, the validate JavaScript function is initiated. Initially we use the getElementByTagName(“input”) function to fetch the object Node list.

The code below

is used to fetch all the input tags (<input>). To verify the same, you can remove the comment from the below code in the code snippet:

This code would get you the result as 6 input tags in the form. There are indeed 6 input tags. This is used to┬áiterate┬áin the for loop. We have used a counter which upon becoming less than the “getElementByTagName“, the for loop counter stops after giving all the values into the variable “param“.

We have also used an if loop to check whether the checkboxes were checked and also convert all the type of the input elments into upper case using toUpperCase() function. The code

is used to fetch the individual values of the checked check boxes and place them one by one into the param variable. At last the output is show to us using an alert window. You can modify this code snippet according to your needs in your web project. The above code snippet is just a thrust to know how to fetch the values from multiple checkboxes checked, so that developers can get an idea on how to go ahead to enhance this to their needs.



, ,

Comments are closed.