Getting Checkbox Values in jQuery

Many times we use checkbox in the form control and post the form using jquery ajax and then we are required to access those form data from client side scripts, like Javascript. Among all possible form controls, dropdown box, checkbox and radio buttons are having multiple options to select. So, we need to push all selected values of these form controls into an array using Javascript.

In this article, we have an example, for getting all selected checkbox values. With this reference, we can repeat it for other multi-valued form controls also. For that, we need to follow some simple steps listed below.

View Demo

Getting Checkbox Values in jQuery

1. Creating HTML form with checkboxes.
2. Adding jquery library file.
3. Accessing form from jQuery.

In a HTML page, create a form tag with multiple checkboxes and we should provide all checkboxes of a group with same name, to indicate that they are multiple values of the same checkbox group as follows:

2.Adding jQuery Library File
It’s very common step, we need to include the path of jQuery library file before using jQuery as a source for using jQuery functions.

3. Accessing Form from jQuery

Here we are handling button click event in document ready and mapping all the checkboxes which have been checked with using jQuery map() utility which translate all items in an array or object to new array of items. In this map utitlity, we are returning their values to an array using its callback function. So now getting checkbox values in jQuery is very easy method.

View Demo

You Might Interested In