0

I have a form which includes a trio of checkboxes:

<input class="hs-input" type="checkbox" name="products_required" value="ProductOne">
<input class="hs-input" type="checkbox" name="products_required" value="ProductTwo">
<input class="hs-input" type="checkbox" name="products_required" value="ProductThree">

Depending on which product landingpage the user has been just before getting to the form page determines which checkbox is pre-selected. So for example if I am ProductOne landingpage and go to the form page, the ProductOne checkbox will be pre-selected.

So Im trying to isolate the ProductOne checkbox which I can only do via the value attribute and simply set it to checked:

  const checkboxSelect = document.querySelectorAll("input[type='checkbox'][value='ProductOne']");
  checkboxSelect.checked = true;

But when I test this not only isnt the checkbox selected, but I see no errors in my console. So I think I've clearly missed something?

Jools
  • 81
  • 1
  • 12
  • 1
    `querySelectorAll` returns a collection. Use `querySelector` instead. – Alex Kudryashev May 22 '23 at 16:41
  • @AlexKudryashev Ah ok I have changed that, although now I see a console error of: `Uncaught TypeError: Cannot set properties of null (setting 'checked')` – Jools May 22 '23 at 16:44
  • I think we need more context; the code you've provided (after changing `querySelectorAll()` to `querySelector()`) should work. There's something else going on. – mykaf May 22 '23 at 17:35

0 Answers0