Select All checkbox for other checkboxes

Highlighted
Anonymous
Not applicable

Select All checkbox for other checkboxes

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

15 REPLIES 15
Highlighted
Level 6 - Champion Alumni

Re: Select All checkbox for other checkboxes

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

Highlighted
Level 10 - Community Moderator

Re: Select All checkbox for other checkboxes

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.

Highlighted
Anonymous
Not applicable

Re: Select All checkbox for other checkboxes

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.

pastedImage_0.png

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);

        });

      });

    });

});

Highlighted
Level 10 - Community Moderator

Re: Select All checkbox for other checkboxes

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

pastedImage_2.png

Anonymous
Not applicable

Re: Select All checkbox for other checkboxes

Hi Sanford,

Thanks for your reply.

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

Thank you

Raj

Highlighted
Level 10 - Community Moderator

Re: Select All checkbox for other checkboxes

  • 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
Highlighted
Anonymous
Not applicable

Re: Select All checkbox for other checkboxes

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

Highlighted
Level 10 - Community Moderator

Re: Select All checkbox for other checkboxes

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

     *

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

Highlighted
Anonymous
Not applicable

Re: Select All checkbox for other checkboxes

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!