Newsletter Preferences Form Auto Selecting all checkboxes

[NCarlos]

Hello,

So currently my companies communication preferences page auto-selects all newsletters we have even when they are not subscribed. This is probably a simple fix, but I need some help with implementing a javascript line to deselect all boxes except the ones they're subscribed to. Someone from HubSpot gave our marketing agency a script to use but it de-selects all boxes including the ones the contact is subscribed to, we need it to select the ones they are already subscribed to and not the ones they haven't subscribed to.

Here is the script:

<script>
  window.onload = (event) => {
    var checkboxes = document.querySelectorAll('.fakelabel input[type="checkbox"]');
    checkboxes.forEach((i) => {
      i.checked = false;
    });
  };
</script>

Thank you for your help!

[Indra]

Hi @NCarlos,

Since your looping through the checkboxes, you can't check by the elements above. So you won't find .item-inner and .highlighted-subscription. You can only check by the input element itself. So to check if an checkbox is checked you can use this code. But this code will only tel the console if it's checked of not so you have to adjust your code yourself to tell it what to do.

<script>
window.onload = (event) => {
  var checkboxes = document.querySelectorAll('.fakelabel input[type="checkbox"]');
  checkboxes.forEach((i) => {
    var isChecked = i.checked;
    if(isChecked){ //checked
      console.log('checked');
    }else{ //unchecked
      console.log('NOT checked');
    }
  });
};
</script>

[Indra]

Hi @NCarlos,

Could you share your js code?

[NCarlos]

Here it is:

<script>
  window.onload = (event) => {
    var checkboxes = document.querySelectorAll('.fakelabel input[type="checkbox"]');
    checkboxes.forEach((i) => {
      if(i.classList.contains('item-inner highlighted-subscription selected')){
        i.checked = true;
      } else {
        i.checked = false;
      }
    });
  };
</script>

[NCarlos]

@Indra Do you have any update on this?

[NCarlos]

I tried using the class 'item-inner highlighted-subscription selected' and that did not work. Could you point me in the direction of the correct class to use? Thank you for your help! 

<div class="item-inner highlighted-subscription selected">
                              <div class="checkbox-row">
                                  <span class="fakelabel">
                                      <input id="id_19944038" type="checkbox" name="id_19944038" checked="">
                                      
                                      
                                      <span>CI Morning Impact | Katy</span>
                                  </span>
                              </div>
                              <p>Our daily email newsletter keeps you informed with the latest information about local development, transportation, business openings and other news impacting Katy.</p>
                          </div>

[Indra]

Hi @NCarlos,

So do you have any html?

You need some reference where an item was selected on forehand. So you need to wrap the element inside the foreach loop. 

In this example it's checked on the class:

<script>
  window.onload = (event) => {
    var checkboxes = document.querySelectorAll('.fakelabel input[type="checkbox"]');
    checkboxes.forEach((i) => {
      if(i.classList.contains('thatClass')){
        i.checked = true;
      } else {
        i.checked = false;
      }
    });
  };
</script>