How to Get Selected Checkbox Value Using jQuery

Last Updated on August 12, 2022 by Roshan Parihar

In this tutorial, learn how to get selected checkbox value using jQuery. The short answer is to use the change event with val() to get a single checked checkbox value.

The checkbox does not allow users to select only one checkbox as you can select multiple checkboxes. However, to restrict users to allowing only a single checkbox selection, you have to use jQuery as given below.

If you want to allow users to select only a single checkbox, you have to use the prop() and not() as given above. This is the code snippet that you have to use in each example given below. You have to replace checkboxname with the name of your checkbox.

Let’s find out how to get single and multiple selected checkbox values with the examples given below.

Method 1: jQuery Get Selected Checkbox Value on Change Event with val() Function

To get the selected checkbox value, you have to use the change event using the change() function of jQuery. After that, you can use the :checked selector with val() function of jQuery.

Output

Virat Kohli
Chris Gayle
Mahendra Singh Dhoni
Sachin Tendulkar
Donald Bradman

The above example contains the checkbox that you can click to get the selected checkbox value. It will allow selecting only a single checkbox and not multiple checkboxes. On each selection, you will get its value in the alert box.

Method 2: Find Checked Checkbox Value on Click Event with val() Function of jQuery

If you want to find the checked checkbox value, you can use the click event using the click() of jQuery. After that, you have to use the val() to find the checked checkbox value.

Output

Red
Green
Blue
Yellow
Brown

When you click any of the checkboxes given above, you will get the checked checkbox value in the alert box. It’s the easiest method of getting the value of the checked checkbox.

Method 3: Using map() of jQuery to Get Selected Checkbox Value

In addition to the above examples, you can also use the click event with the jQuery map() function. You also have to use the selector :checked to find the checked checkboxes.

Output

One
Two
Three
Four
Five

Now, to get the value of the selected checkbox, you have to click the checkboxes given above. On each click, you will get the value of the selected checkbox in the alert box.

How to Get Multiple Checked Checkboxes Values in jQuery

If you want to get the value for multiple selections, you have to create an array variable. First, you have to declare a variable as an array to store the checkbox value in an array format. After that, you have to use the each() to scan each selected checkboxe to find if checked.

To create an array of checkboxes, you have to use the push function and push each checked checkbox to the array variable. After that, use the join() function to get the checked checkbox values in an array format in comma separation.

Output

Virat Kohli
Chris Gayle
Mahendra Singh Dhoni
Sachin Tendulkar
Donald Bradman

Click multiple checkboxes to get value at the click of the button given above. The array can be useful to get multiple selection values and get user input data.

You May Also Like to Read.

I hope you like this tutorial on how to get selected checkbox values using jQuery.