3schools

Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu June 03, 2023 . #Array . #checkbox
❌

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 .
  3. 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.
  4. Finally, convert the array into a string using toString() method and display the value using javascript alert box.

Store selected checkbox values in array using forEach() method.

Use the forEach() method to store all selected checkbox values in an array. The example is given below.

<script>
function myFunc() {
 let arr = [];
 let checkboxes = document.querySelectorAll("input[type='checkbox']:checked");

checkboxes.forEach((item)=>{
   arr.push(item.value)
}) 

console.log(arr);
}
</script>
save
listen
AI Answer
3 Answers
  1. Select checkboxes and click on the submit button and check out the console.
    https://www.3schools.in/p/code-editor.html?q=CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDEiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDIiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDMiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDQiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDUiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDYiIC8+Cgo8YnV0dG9uIG9uY2xpY2s9Im15RnVuYygpIj4gU3VibWl0PC9idXR0b24+CjxzY3JpcHQ+CmZ1bmN0aW9uIG15RnVuYygpIHsKIGxldCBhcnIgPSBbXTsKIGxldCBjaGVja2JveGVzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiaW5wdXRbdHlwZT0nY2hlY2tib3gnXTpjaGVja2VkIik7CgpjaGVja2JveGVzLmZvckVhY2goKGl0ZW0pPT57CiAgIGFyci5wdXNoKGl0ZW0udmFsdWUpCn0pIAoKY29uc29sZS5sb2coYXJyKTsKfQo8L3NjcmlwdD4=
    Reply Delete
    Share
  2. To store selected checkbox values in an array in pure JavaScript, you can use the forEach() method. This method will iterate through all the checkboxes and add the value of each selected checkbox to the array. Here is an example of how to use it:
    let myArray = [];
    let checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
        myArray.push(checkbox.value);
    }
    });
    In this example, the variable myArray will contain an array of all the selected checkbox values. You can then use this array in your code as needed.
    Reply Delete
    Share
  3. First, create an empty array that will hold all the checked values: var myArray = [];
    Then loop through each checkbox on your form and add its value into your new array using the push() method.
    for (var i=0; i<checkboxes.length;i++){
    if(checkboxes[i].checked){
        myArray.push(checkboxes[i].value);
    }
    }
    Now all of the selected values from your form have been stored in an easy-to-access array!
       Now you can easily access any data from the myArray[] array.
    Reply Delete
    Share
Write Your Answer
loading
back
View All