How to get multiple checkbox value in javascript with getelementbyid

How to get multiple checkbox value in javascript with getelementbyid
Table of Contents

Looking for a way to get multiple checkbox value in Javascript with getelementbyid then you are the right place today I will show how to get value from multiple checkboxes in Javascript with getelementbyid so follow up with me till the end.

Checkbox is a great way of input which allows users to select something they are used in registration and logins forms below is the code for checkbox input in HTML.

				
					<input type="checkbox" name="color" value="red" id="color1">
				
			

Above is the HTML code to create a checkbox in HTML now we want to get the values from these checkboxes so how do we do it if you said Javascript then you are right.

How to get multiple checkbox value in Javascript

Now let’s see how to get values from this checkboxes so first we need to create HTML page you can copy the below code or create your own one.

				
					<!DOCTYPE html>
<html>
    <head>
        <title>Getting multiple checkbox value</title>
    </head>
    <body>
        <p id="message"></p>
       <form id="form">
           <h1>Which is your favourite color</h1>
           Red<input type="checkbox" name="color1" value="red" id="color1">
           BLUE<input type="checkbox" name="color2" value=blue id="color2">
           Yellow<input type="checkbox" name="color3" value="yellow" id="color3">
           <button>Submit</button>
       </form>
    </body>
</html>
				
			

Above is the HTML code you can test this code and see how it works remember to add Id’s name properly because we need to use it in Javascript now let’s take a look at Javascript code.

				
					let form = document.getElementById('form')

let color1 = document.getElementById('color1')
let color2 = document.getElementById('color2')
let color3 = document.getElementById('color3')

let checkval = []

form.addEventListener('submit',(e) => {
    e.preventDefault()
    if (color1.checked){
        checkval.push(color1.value)
    }
    if (color2.checked){
        checkval.push(color2.value)
    }
    if (color3.checked){
        checkval.push(color3.value)
    }
    if(checkval.length > 0) {
        document.getElementById('message').innerHTML = checkval
        form.reset()
    }
})
				
			

You have to add the above Javascript code to a seperate Javascript file and link it in HTML or add it in script tag in HTML code.

If you have tested the above code you can see that we get the selected value shown as a message so we were successfully able to get multiple checkbox value in Javascript with getElementByID(). You can expand upon this and add more functionalities.

Conclusion

This was a short and very simple tutorial guide on getting multiple values in Javascript with array and getelementbyid I hope you found what you were looking for and if you are looking for more guides here are some more tutorial guides you may find helpful:

Want more article guides like this then stay with us by joining our Telegram channel for latest updates of our guides and more – Join Telegram Channel.

Thank you for reading, Have a nice day 🙂

Share This Post
Share on facebook
Share on twitter
Share on email
Share on whatsapp

Leave a Reply

Subscribe To Our Newsletter

Get updates and learn from the best

Latest Guides & Articles