I want to catch all labels of checked checkbox in javascript

Question

Is there a way to catch all the label texts of a checked checkbox in Javascript (not JQuery).

My HTML is:

<div class="wpgu-onboarding-answer-container">
   <div class="wpgu-onboarding-answer" data-bc-answer-post="Firstitem">
      <input id="post-3-0" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="670" checked="checked">
      <label for="post-3-0" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">Firstitem</span>
      </label>
   </div>
   <div class="wpgu-onboarding-answer" data-bc-answer-post="SecondItem">
      <input id="post-3-8" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="681">
      <label for="post-3-8" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">SecondItem</span>
      </label>
   </div>
</div>

I want to catch the label of the checked checkbox in Javascript in order to use it as Javascript Variable in Google Tagmanager.

Currently I've got this code (from www.simoahava.com) to catch the values of the checked checkboxes.

function () {


    var inputs = document.querySelectorAll('.wpgu-onboarding-answer-containter input'),
        selectedCheckboxes = [];
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
            selectedCheckboxes.push(inputs[i].value);
        }
    }
    return selectedCheckboxes;
}

This script gives me all the values, but these are none-descriptive values. But I want the descriptive labels.

Is there a way to catch the text within the span with class .wpgu-onboarding-answer-title of all checked checkboxes ?

Thanks in Advance

Erik.

Answer 1

Apart from the previous solution, would like to share one more simple solution based on the code mentioned in the question. The solution can be as simple as fetching all the labels with class as wpgu-onboarding-answer-title and based on which input element is selected, fetch the respective label index and use it. Please note that I have added an extra button for testing the function easily.

function abc() {
        var labels = document.querySelectorAll('.wpgu-onboarding-answer-title');
    var inputs = document.querySelectorAll('.wpgu-onboarding-answer-container input'),
        selectedCheckboxes = [];
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
                selectedCheckboxes.push(labels[i].textContent);
            //selectedCheckboxes.push(inputs[i].value);
        }
    }
    console.log(selectedCheckboxes);
    return selectedCheckboxes;
}

<div class="wpgu-onboarding-answer-container">
   <div class="wpgu-onboarding-answer" data-bc-answer-post="Firstitem">
      <input id="post-3-0" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="670" checked="checked">
      <label for="post-3-0" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">Firstitem</span>
      </label>
   </div>
   <div class="wpgu-onboarding-answer" data-bc-answer-post="SecondItem">
      <input id="post-3-8" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="681">
      <label for="post-3-8" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">SecondItem</span>
      </label>
   </div>
</div>
<button onclick="abc()">
  Fetch All Chkbox Values
</button>

Please note that this solution would only work if you have wpgu-onboarding-answer-title class being used for only this purpose and not anywhere else in the page before.