Javascript: How to get values from checkboxes that are created “dynamically”

Question

So i am creating/rendering checkboxes dynamically depending on the records in my database. This is currently the way for "displaying" those Checkboxes:

function formatBranch(branch) {
    return (
      "<p>\n" +
      "  <label>\n" +
      "  <input id=" + branch['name'] + " type=\"checkbox\" class=\"filled-in libraryCheckbox\">\n" +
      "  <span>" + branch['name'] + "</span>\n" +
      "  </label>\n" +
      "</p>"
    );
}

I now need to check which checboxes are checked and retrieve that/those specific checboxes as I am going to use them to filter out a search. Any ideas for how i can achieve this?

Thanks for any help :)

Answer 1

To get all checkboxes values with pure js:

let chks = document.getElementsByTagName("input");
for(var i = 0; i < chks.length; i++) {
  if(chks[i].type == "checkbox") {
    if (chks[i].checked) {
      // the checkbox is clicked
    } else {
      // checkbox is not clicked
    }
  }  
}

You can use it to build an array of filters or something like this

If you want to act on click, do something like this:

let chks = document.getElementsByTagName("input");
for(var i = 0; i < chks.length; i++) {
  if(chks[i].type == "checkbox") {
    chks[i].addEventListener('change', function(e){
      if (e.target.checked) {
        // clicked
      } else {
        // not clicked
      }
    });
  }  
}