Hide elements im Checkbox is not marked

[joki94]

Hello, I have different field elements and an checkbox element with 5 options.

I want that all the field elements are hidden by loading the form and checkboxes are not marked. Then if I mark one or more options of the checkboxes the fields should appear accordingly and if I uncheck it, the fields should disapear.

I tried to solve is with the pre defined actions of Javascript, but I have to add very much and everytime if I save and close my checkbox element with the javascript actions and open in again, some actions are deleted. So I hope that someone can help me to give me the custom js code to solve my issue.

Here is an example what I want.

Fieldelements:
A Singleroom 1
A Singleroom 2
A Singleroom 3
A Doubleroom 1
A Doubleroom 2
A Doubleroom 3

B Singleroom 1
B Singleroom 2
B Doubleroom 1
B Doubleroom 2

C Singleroom
C Doubleroom

etc also for D and E

Checkbox with Options A,B, C,D, E

Now I want that if I check A that all fields with A appear, if I check B all fields with B and so on.

Hope it is clear what I need.

Thanks for your help and this great component,

joki
Single3
DoubleA
DoubleB
DoubleC

 

[myfatebiz]

Here the code below:

var div = $('tablename___checkbox');
var inputs = div.getElements('input[type=checkbox]');

for (i=0; i < inputs.length; i++) {
    if (inputs[i].checked && inputs[i].value == 'A') {
      $$('.fb_el_tablename___asingleroom1').show();
      $$('.fb_el_tablename___asingleroom2').show();
      $$('.fb_el_tablename___asingleroom3').show();
  }
    if (!inputs[i].checked && inputs[i].value == 'A') {
      $$('.fb_el_tablename___asingleroom1').hide();
      $$('.fb_el_tablename___asingleroom2').hide();
      $$('.fb_el_tablename___asingleroom3').hide();
  }
    if (inputs[i].checked && inputs[i].value == 'B') {
      $$('.fb_el_tablename___bsingleroom1').show();
      $$('.fb_el_tablename___bsingleroom2').show();
      $$('.fb_el_tablename___bsingleroom3').show();
  }
    if (!inputs[i].checked && inputs[i].value == 'B') {
      $$('.fb_el_tablename___bsingleroom1').hide();
      $$('.fb_el_tablename___bsingleroom2').hide();
      $$('.fb_el_tablename___bsingleroom3').hide();
  }
}

Visit here for demo http://rainspark.net/hide-elements-with-checkbox

 

[cheesegrits]

Try using Fabrik objects and methods ...

In a 'change' (or 'click') event on your checkbox ...

// the Fabrik element object getValue() method will return an array of selected values
var checked = this.getValue();

// use jQuery.inArray() to see if values are in the 'checked' array.  Returns -1 if not.
if (jQuery.inArray('A', checked) !== -1) {
      this.form.formElement.get('tablename___asingleroom1').show();
      this.form.formElement.get('tablename___asingleroom2').show();
      this.form.formElement.get('tablename___asingleroom3').show();
}
else {
      this.form.formElement.get('tablename___asingleroom1').hide();
      this.form.formElement.get('tablename___asingleroom2').hide();
      this.form.formElement.get('tablename___asingleroom3').hide();
}

if (jQuery.inArray('B', checked) !== -1) {
      this.form.formElement.get('tablename___bsingleroom1').show();
      this.form.formElement.get('tablename___bsingleroom2').show();
      this.form.formElement.get('tablename___bsingleroom3').show();
}
else {
      this.form.formElement.get('tablename___bsingleroom1').hide();
      this.form.formElement.get('tablename___bsingleroom2').hide();
      this.form.formElement.get('tablename___bsingleroom3').hide();
}

-- hugh

 

[joki94]

Thank you, that helps a lot.

Can you also say me how the code should look like if I want the same with radio buttons?

KInd Regards and thank you very much, joki94

 

[cheesegrits]

If you'd like to take out a support sub, I'd be happy to provide further help.

-- hugh