Select All checkbox for other checkboxes | Community
Skip to main content
A
Anonymous
February 20, 2018
Question

Select All checkbox for other checkboxes

  • February 20, 2018
  • 3 replies
  • 6894 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

keithnyberg
keithnyberg
Level 7
February 20, 2018

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

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    February 20, 2018

    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.

      A
      Anonymous
      July 6, 2018

      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
        SanfordWhiteman
        Level 10
        July 6, 2018

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

        Paul_Johnson
        Paul_Johnson
        Level 4
        February 21, 2018

        Ryley, Have one of the options be "all of the above". Then have a smart campaign in the background check all those boxes on the contact's record if they choose the "select all option". Hope that helps!

        Terms & ConditionsAccessibility statement

        Loading footer...