How to Get All Checked Checkbox Values in JavaScript

When working with forms and user input in JavaScript, one common task is to retrieve the values of checked checkboxes. This is particularly useful when you need to collect user preferences, such as selecting multiple items from a list. In this post, we will explore how to retrieve the values of all checked checkboxes in JavaScript.

1. Basic HTML Structure

Let’s start by creating a simple HTML structure with multiple checkboxes. We’ll assign each checkbox a name attribute and a value attribute. The value attribute will hold the data we want to retrieve.

<form id="myForm">
  <label><input type="checkbox" name="fruit" value="Apple"> Apple</label><br>
  <label><input type="checkbox" name="fruit" value="Banana"> Banana</label><br>
  <label><input type="checkbox" name="fruit" value="Orange"> Orange</label><br>
  <label><input type="checkbox" name="fruit" value="Grapes"> Grapes</label><br>
  <button type="button" onclick="getCheckedValues()">Get Checked Fruits</button>
</form>

2. Using JavaScript to Retrieve Checked Checkbox Values

Now, let’s write the JavaScript function to retrieve the values of the checkboxes that are checked. We’ll use the document.querySelectorAll() method to select all checkboxes with the name fruit and check which ones are selected.

function getCheckedValues() {
  // Get all checkboxes with the name "fruit"
  var checkboxes = document.querySelectorAll('input[name="fruit"]:checked');
  
  // Initialize an array to hold the values of checked checkboxes
  var selectedValues = [];

  // Loop through the checked checkboxes and push their values into the array
  checkboxes.forEach(function(checkbox) {
    selectedValues.push(checkbox.value);
  });

  // Display the selected values
  alert("Selected fruits: " + selectedValues.join(", "));
}

3. Explanation of the Code

1. document.querySelectorAll('input[name="fruit"]:checked'):
   • This selects all the input elements of type checkbox that have the name attribute fruit and are checked.
2. checkboxes.forEach():
   • This loops over all the selected checkboxes that are checked. For each checkbox, we push its value attribute into the selectedValues array.
3. selectedValues.join(", "):
   • This combines the array of selected values into a single string, separated by commas. This is then displayed in an alert box.

4. Testing the Functionality

When the user clicks the “Get Checked Fruits” button, the function getCheckedValues() is called, and the values of all selected checkboxes are displayed in an alert box. For example, if the user selects “Apple” and “Grapes,” the alert will show:

Selected fruits: Apple, Grapes

5. Alternative Methods (Using Form Elements)

You can also use a simpler approach with the form element if you have a form with a name attribute:

function getCheckedValues() {
  var form = document.getElementById('myForm');
  var checkboxes = form.elements['fruit'];
  var selectedValues = [];
  
  // Loop through all checkboxes and check if they are checked
  for (var checkbox of checkboxes) {
    if (checkbox.checked) {
      selectedValues.push(checkbox.value);
    }
  }

  alert("Selected fruits: " + selectedValues.join(", "));
}

6. Conclusion

Retrieving the values of checked checkboxes is straightforward with JavaScript. Whether you use querySelectorAll() or loop through the form’s elements, the key is to identify the checked checkboxes and collect their value attributes. This method is particularly useful in scenarios like survey forms, multiple-choice questions, or collecting user preferences.