How to store selected checkbox value in array in JavaScript

In this article, you will learn how to store selected checkbox value in array using JavaScript or how to get multiple checkbox value in JavaScript .

Store all selected checkbox value in array using for loop.

In the first example, I will show you the example by using javascript for loop.

Example using for loop
function myFunc() {
 let arr = [];
 let checkboxes = document.querySelectorAll("input[type='checkbox']:checked");
 for (let i = 0 ; i < checkboxes.length; i++) {
  arr.push(checkboxes[i].value)
 }
}
Try it Yourself »
  1. When the Store Value button is clicked, the myFunc() function gets called.
  2. Inside this function, create a new blank array (let arr = []). Then, store the selected checkbox into a variable using querySelectorAll() method.
  3. The querySelector() method returns the first element that matches the specified selectors. But querySelectorAll() method returns all the elements that matches the specified selectors as a NodeList representing a list of the selected elements .
  4. Then create a for loop inside the myFunc() function. When the loop is executed , the selected value is inserted into the blank array using the push() method.
  5. Finally, convert the array into a string using toString() method and display the value using javascript alert box.