How To Get Multiple Checkbox Value In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of how to get multiple checkbox value in JavaScript, Checkboxes allow users to make binary choices (true or false) by checking and unchecking them.
A checkbox is an icon that is commonly used to gather input from a user in GUI forms and applications.
As you may recall, checkboxes are different from radio buttons and dropdown lists since they allow multiple selections at the same time.
Radio buttons and dropdowns, on the other hand, allow us to pick just one out of the options available.
There is also a JavaScript method that allows you to create a checkbox, but it is a bit more complicated.
In addition to getting all selected values from the checkboxes, there is one more method.
In the next section, you will learn how to get the values of all checkboxes marked by the user using the querySelectorAll() method. In this case, the HTML form will be fetched and the checkbox values will be displayed.
Step By Step Guide On How To Get Multiple Checkbox Value In JavaScript :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>TalkersCode - check checkbox </title>
</head>
<body>
<h1>TalkersCode</h1>
<p>Choose the Language you can work with:</p>
<input type="checkbox" name="language" value="HTML"> HTML<br>
<input type="checkbox" name="language" value="CSS"> CSS<br>
<input type="checkbox" name="language" value="JavaScript"> JavaScript<br>
<input type="checkbox" name="language" value="PHP"> PHP<br>
<input type="checkbox" name="language" value="Python"> Python<br>
<button onclick="selectAll()">Select All</button>
<script>
function selectAll() {
// selecting all checkboxes
// of group language
var checkboxes = document.getElementsByName('language');
var values = [];
// looping through all checkboxes
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
values.push(checkboxes[i].value);
}
alert(values);
}
</script>
</body>
</html>
- In our first step, we write <HTML>, which tells the browser what HTML version we are using. HTML documents begin with tags.
- In the <head> tag, we will describe the heading of the project. A title and a title/description may be used in any way.
- After that, the headings are opened.
- In the next paragraph, we create a checkbox for selecting a language.
- Then, multiple checkboxes are created.
- To explain how the javascript google API worked, we use the script tag with the code, file, or source we used.
- After that </script></body></html> and code should be executed after closing all tags.
Conclusion :-
Checkbox elements have a checked property, which will be true if the checkbox is checked, or false if it is not checked.
I hope this article on how to get multiple checkbox value in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
