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 »
- When the Store Value button is clicked, the myFunc() function gets called.
- Inside this function, create a new blank array (let arr = []). Then, store the selected checkbox into a variable using querySelectorAll() method.
- 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.
- Finally, convert the array into a string using toString() method and display the value using javascript alert box.
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 .
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
How to store selected checkbox value in array in JavaScript
3
In this article, you will learn how to store selected checkbox value in array using JavaS…
asked
Apu
3 answers
2915
In this article, you will learn how to store selected checkbox value in array using JavaS…
Answer Link
answered
Apu
https://www.3schools.in/p/code-editor.html?q=CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDEiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDIiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDMiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDQiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDUiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDYiIC8+Cgo8YnV0dG9uIG9uY2xpY2s9Im15RnVuYygpIj4gU3VibWl0PC9idXR0b24+CjxzY3JpcHQ+CmZ1bmN0aW9uIG15RnVuYygpIHsKIGxldCBhcnIgPSBbXTsKIGxldCBjaGVja2JveGVzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiaW5wdXRbdHlwZT0nY2hlY2tib3gnXTpjaGVja2VkIik7CgpjaGVja2JveGVzLmZvckVhY2goKGl0ZW0pPT57CiAgIGFyci5wdXNoKGl0ZW0udmFsdWUpCn0pIAoKY29uc29sZS5sb2coYXJyKTsKfQo8L3NjcmlwdD4=
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.
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.