How To Get Multiple Checkbox Value In JavaScript With getElementById
Last Updated : Jan 1, 2023
IN - JavaScript
In this tutorial we will show you the solution of how to get multiple checkbox value in JavaScript with getElementById, multi in the sense we need to provide more than one option with checkbox type.
For getting checkbox value we has more methods those are depends on checkbox attributes like by ID, Class, Events and Listeners, etc…, so we can use any one method for that.
Step By Step Guide On How To Get Multiple Checkbox Value In JavaScript With getElementById :-
In html we created four <input> tags with ‘checkbox’ type. When user clicks on submit button <script> will loads function.
All checkbox value looped using for loop and checking which checkboxs are checked those are printed on body of page.
For this we used document.getElementById(), document.getElementsByName(), document.body.append() these method in javascript.
<!DOCTYPE html>
<html>
<head>
<title>Getting multiple check box value</title>
</head>
<body>
<input type="checkbox" id="ch1" name="cb" value="JAWA">JAWA<br>
<input type="checkbox" id="ch2" name="cb" value="KTM">KTM<br>
<input type="checkbox" id="ch3" name="cb" value="FZ">FZ<br><br>
<button id="btn">Submit</button><br><br>
<script>
document.getElementById('btn').onclick=function(){
var i=document.getElementsByName('cb');
for(var checkbox of i){
if(checkbox.checked)
document.body.append(checkbox.value+' ');
}
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We created three <input> tags with ‘checkbox’ type, same name as ‘cb’ and respective ‘values’. One button for submission with ID ‘btn’.
- When we need javascript we can use it either within a <script> tags or external file. In <script> tag ‘document.getElementById()’ using with ‘onclick’ checking ‘btn’ clicked by user. When user clicks on this button each checkbox value collected by ‘document.getElementsByName()’.
- Then collected checkbox values are inserted to for loop using variable ‘i’ and in for loop each value with checkbox are checked using if() condition. If condition yes means it will appends on body of page by ‘document.body.append()’.
- If condition fails this loop checks next checkbox value up to whole checkbox length. So we can get result of each selected check box values on webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on how to get multiple checkbox value in JavaScript with getElementById helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion now we are learned how easily gets all selected checkbox value in javascript.
These concepts used on like when user needs to select multiple choices for one question (i.e in known languages, known programming languages and preferred locations,etc..,).
For developing webpage with HTML and CSS we need to know javascript language also.
As we know how important this language so try to explore more concepts using javascript. I hope this guidance will helpful for everyone.
