How to toggle 2 fields in Forms 2.0

[Grégoire_Miche2]

Dear all,

I have 2 checkboxes in a form. I want that both cannot be checked together. So, when the 1st one is checked, I want that the second one to be unchecked immediately and vice-versa. (all this being visible to the visitor, not happening when the form is posted).

Any idea on how to do this ?

Thx in advance,

-Greg

[Stijn_Heijthuij]

Hi Gregoire,

As far as I know there's no way to manipulate the values of fields in Forms2.0

Based on my experience, the best bet you'll have it to add some Javascript code to check/uncheck based on either of the fields.

[Priyank_Joshi3]

Hi Gregoire,

Check boxes, by design, are meant to be toggled on or off. They are not dependent on other checkboxes, so you can turn as many on and off as you wish.

Radio buttons, however, are designed to only allow one element of a group to be selected at any time. I would suggest using radio buttons instead.

Thanks
Priyank

[SanfordWhiteman]

I agree with Priyank that a radio button set is commonly -- though not always -- considered semantically appropriate when you want mutually exclusive selections.

Radios are meant to result in a single value stored to a single field on the back end.

Checkboxes may result in a single value on a single field, or a single value posted to one of several fields (with the other fields left at boolean false/off).

These are different use cases, and form builder limitations are another consideration. Marketo does not let you natively use radio buttons across multiple back-end fields. However, I recently posted a Forms 2.0 recipe to present independent checkboxes *as if* they were radios. Search the Community and you'll find it.

[Grégoire_Miche2]

I need checkboxes, not radio buttons, since it can be a one to many relationship, such as in a subscription center.

[SanfordWhiteman · Accepted solution]

MktoForms2 :: Indie Checkboxes to Virtual Radio Set

[Grégoire_Miche2]

Thx a lot Sanford,

Just a quick question : how do I customize the line

var mutexSelectors = '#VIP__c,  #ContactReq__c';

If I have checkbox1__c, checkbox2__c and checkbox3__c that all need to be mutually exclusive to unsubscribed field

-Greg

[SanfordWhiteman]

It's a CSS selector list, so if those are IDs:

     #id1, #id2, #id3

You can even make more complex groups, like

     ,myName, #myId, #myFieldset input[type=checkbox]

[Grégoire_Miche2]

Hi again Sanford Whiteman ,

I gather that it makes all the fields mutually exclusive, meaning that only 1 can be selected at any time.

What I need if more :

1 group :

Suscribe to :

• Product news
• Event invite
• Blog posts

---

• Unsuscribe from every email

When the visitors checks the last one, the 3 first are unchecked

When the visitor clicks any of the 3 first, the last one is unchecked

-Greg

[Grégoire_Miche2]

Hi again,

I gather that a code like this would work :

MktoForms2.whenReady(function(form) {

     // array of independent checkbox fields to be considered a mutually exclusive set

     var mutexSelectors1 = '#field1__c,  #field2__c, #field3__c', mutexSelectors2 = '#unsubscribed' ;

     var formEl = form.getFormElem()[0],

          mutexElements1 = formEl.querySelectorAll(mutexSelectors1),

            mutexElements2 = formEl.querySelectorAll(mutexSelectors2);

     Array.prototype.forEach.call(mutexElements1, function(el) {

          el.addEventListener('click', function(e) {

               var clickedEl = this;

               Array.prototype.forEach.call(mutexElements2, function(el) {

                    if ( el !== clickedEl ) el.checked = false;

               });

          });

     });

     Array.prototype.forEach.call(mutexElements2, function(el) {

          el.addEventListener('click', function(e) {

               var clickedEl = this;

               Array.prototype.forEach.call(mutexElements1, function(el) {

                    if ( el !== clickedEl ) el.checked = false;

               });

         });

     });

});

But may be it's not optimized (I am not a Javascript specialist)

-Greg