Select All checkbox for other checkboxes

[Anonymous]

Is it possible within Marketo to setup a form to have a select all checkbox? It would function like this:

- Option 1 (checkbox)

- Option 2 (checkbox)

- Option 3 (checkbox)

...

- Select All (checkbox).

The "Select All" would then check off 1, 2, 3.

I can do this outside of Marketo using JS but I am wondering if there is a way to do this within marketo itself.

Thanks,

Ryley

[Keith_Nyberg2]

Unfortunately there is nothing out of box that allows this functionality. JS is the best route to accomplish this.

[SanfordWhiteman]

Set the value of your Select All checkbox to a single asterisk (*).

Then use this existing code: MktoForms2 :: Select All Checkbox. It'll automatically pick up all the Select All checkboxes on your form without having to know any field names.

Unfortunately, using some pure DOM events (generally frowned upon) is necessary here, as we can't solely rely on the Marketo Forms API events.

[Anonymous]

Hi Sanford,

Thank you for sharing your valuable suggestion.

I have a similar scenario where I tried the below code in the HTML element in the landing page. but it didn't show anything in the preview.

Below is my form which I created using Form 2.0 and want the 3 options to be selected when I select the option Select all and I'm facing issues while integrating the code which you mentioned in your reply with the HTML content.

MktoForms2.loadForm("//app-sn04.marketo.com", "414-XLW-231", 1067);
MktoForms2.whenRendered(function(form) {
  var formEl = form.getFormElem()[0],
    arrayFrom = getSelection.call.bind([].slice),
    selCheckboxGroups = ".mktoCheckboxList:not([data-selectall-bound='true'])",
    selSelectAllBox = "input[value='*']",
    selStandardBoxes = "input:not([value='*'])";
    arrayFrom(formEl.querySelectorAll(selCheckboxGroups)).forEach(function(boxGroup) {
      boxGroup.setAttribute("data-selectall-bound","true");
      arrayFrom(boxGroup.querySelectorAll(selSelectAllBox)).forEach(function(selectAllBox) {
        selectAllBox.addEventListener("change", function(e) {
          arrayFrom(boxGroup.querySelectorAll(selStandardBoxes)).forEach(function(standardBox) {
             standardBox.checked = this.checked;
          },this);
        });
      });
    });
});

[SanfordWhiteman]

Please edit your post and highlight the code as JavaScript using the Advanced Editor's Syntax Highlighter, then we'll continue.

[Anonymous]

Hi Sanford,

Thanks for your reply.

I've made the changes. Can you help me now?

Thank you

Raj

[SanfordWhiteman]

• The load order doesn't make sense. You don't run loadForm inside whenReady - the form has to be loaded for whenRendered or whenReady to ever fire
• That can't be your complete code (it's missing 2 layers of parentheses and braces)
• Form 1267 and Munchkin ID 414-XLT-221 do not exist on pod app-sn03.marketo.com, so that form can't possibly load

[Anonymous]

Hi Sanford,

Thank you for the suggestions

I've changed the code. But it's still not loading.

Am i missing something here?

Thank you

[SanfordWhiteman]

The checkbox you're using as your Select All has to have the value

     *

(just an asterisk). This represents the wildcard value.

[Anonymous]

Hi Sanford,

The checkbox "Select All" has the value of the other 3 Options in the form.

Do I need to mention it in the code?

as

  selSelectAllBox = "input[value='Option1,Option2,Option3']",

    selStandardBoxes = "input:not([value='Option1,Option2,Option3'])";

is it something like this ?

Thanks for the help!