All TalkersCode Topics

Follow TalkersCode On Social Media

How To Get Multiple Checkbox Value In JavaScript

Last Updated : Jul 1, 2023

How To Get Multiple Checkbox Value In JavaScript

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">
  <title>TalkersCode - check checkbox </title>
  <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>
    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;
  1. In our first step, we write <HTML>, which tells the browser what HTML version we are using. HTML documents begin with tags.
  2. In the <head> tag, we will describe the heading of the project. A title and a title/description may be used in any way.
  3. After that, the headings are opened.
  4. In the next paragraph, we create a checkbox for selecting a language.
  5. Then, multiple checkboxes are created.
  6. To explain how the javascript google API worked, we use the script tag with the code, file, or source we used.
  7. 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.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪