Hide/show checkbox based on another checkbox

[enyl3]

Hi,

I am very new to Adobe, and currently creating a fillable form for intern work.

Is there a way to hide/show a checkbox based on whether or not another checkbox is checked/unchecked?

I want "box2" to show only if "box1" is checked. If "box1" is unchecked, "box2" should be hidden.

I've been looking around the forum and elsewhere, but can't really seem to find a solution. 

Additional info: "box1" is "pre-checked", so that when colleagues open the file, "box1" will already be checked (they're supposed to uncheck boxes themselves). So when they remove the check / uncheck "box1", "box2" will become hidden. 

[Karl Heinz Kremer]

Let's say you have a checkbox named CheckBox1 and another one named CheckBox2, and you want to hide CheckBox2. The following script, when used as a "MouseUp" action for CheckBox1 will do this:

if (event.target.value == "Yes") {
    this.getField("CheckBox2").display = display.visible;
}
else {
    this.getField("CheckBox2").display = display.hidden;
}

[enyl3]

Hi Karl,

Thank you. This seems to "almost" do the job. When I uncheck "CheckBox1", "CheckBox2" becomes hidden (which is exactly what I wanted). But when I check "CheckBox1" again, "CheckBox2" remains hidden. Is there a way to make it so that "visibility" of "CheckBox2" constantly depends on whether or not "CheckBox1" is checked?

[try67]

Make sure the export value of the first field is indeed "Yes".

[Nesa Nurani · Accepted solution]

You can use this code as Mouse UP event of CheckBox1:

this.getField("CheckBox2").display = event.target.value == "Off" ? display.hidden : display.visible;

[enyl3]

Thanks for all your inputs. Nesa Nuranis suggestion does exactly what I wanted 🙂

[FizzyB]

Hi Nesa,

Thank you for the above. This worked for half of my form, wondering if you might be able to help figure out why the same will not work on the other half.

So i have two checkboxes 'checkbox1' and 'checkbox2'. 'checkbox1' is related to 'checkboxA', 'checkboxB', 'checkboxC' and 'checkbox2' is related to 'checkboxD', 'checkboxE', 'checkboxF'.

Your code above worked for 'checkbox1' : 'checkboxA', 'checkboxB', 'checkboxC' but will not work for 'checkbox2' : 'checkboxD', 'checkboxE', 'checkboxF'

I am very new to this and self-learning as I go. Appreciate your guidance.

I 

[FizzyB]

Disregard the above, I was able to identify the error.

However I am having another issue where if I select 'checkbox1' and uncheck it to then select 'checkbox2', 'checkboxA', 'checkboxB', 'checkboxC' do not revert back to hidden status and remain visible.

How would I code checkboxA', 'checkboxB', 'checkboxC' and 'checkboxD', 'checkboxE', 'checkboxF' to change to visible when 'checkbox1' and 'checkbox2' are selected, respectively and back to hidden if they are unchecked?

[Nesa Nurani]

Can you post the script you are using, and where do you use the script?

[FizzyB]

Hi Nesa,

I want to mention 'checkbox1' and 'checkbox2' have the same field name 'Boxes' with export values 'checkbox1' and 'checkbox2'.

In 'checkbox1' I created a 'MouseUp' event and 'Run a JavaScript' action as follows:

this.getField("checkboxA").display = event.target.value == "Off" ? display.hidden : display.visible;

this.getField("checkboxB").display = event.target.value == "Off" ? display.hidden : display.visible;

this.getField("checkboxC").display = event.target.value == "Off" ? display.hidden : display.visible;

In 'checkbox2' I created a 'MouseUp' event and 'Run a JavaScript' action as follows:

this.getField("checkboxD").display = event.target.value == "Off" ? display.hidden : display.visible;

this.getField("checkboxE").display = event.target.value == "Off" ? display.hidden : display.visible;

this.getField("checkboxF").display = event.target.value == "Off" ? display.hidden : display.visible;

When I tick 'checkbox1' : 'checkboxA', 'checkboxB', 'checkboxC' become visible. When I untick 'checkbox1' : 'checkboxA', 'checkboxB', 'checkboxC' become hidden. The same happens to 'checkboxD', 'checkboxE', 'checkboxF' when I tick/untick 'checkbox2', respectively. 

However if I ticked 'checkbox1' : and made visible 'checkboxA', 'checkboxB', 'checkboxC'  but changed selection and ticked 'checkbox2' resulting in 'checkbox1' becoming unticked with 'checkboxD', 'checkboxE', 'checkboxF' now made visible but 'checkboxA', 'checkboxB', 'checkboxC' also remain visible.

I've also attached the sample file here.

[Nesa Nurani]

Since you are not using calculation script, you need to add script to each checkbox to hide others checkboxes.

Try now:

https://drive.google.com/uc?export=download&id=1_k9vLeLKwWuugqUG3f3e9E48oc4yaR7n 

[FizzyB]

Thank you Nesa!

[FizzyB]

Hi Nesa,

A quick follow up: If 'checkbox1' : 'checkboxA', 'checkboxB', 'checkboxC' are ticked but then 'checkbox1' is unticked, is there a code I can add to what was previously provided that would reset 'checkboxA', 'checkboxB', 'checkboxC' to a blank/unchecked state?

[Nesa Nurani]

Yes, add this script to the script already in checkbox1:

if(event.target.value == "Off"){
this.getField("CheckboxA").checkThisBox(0,false);
this.getField("CheckboxB").checkThisBox(0,false);
this.getField("CheckboxC").checkThisBox(0,false);}

[FizzyB]

thank you, and if it was text field instead of checkboxA, checkboxB, checkboxC (connected to Checkbox1), what verbiage would be placed instead of .checkThisBox?

[Karl Heinz Kremer]

Looks like I broke my own rule that I teach my students: Don't test for "Yes",  check for not "Off". The reason for this is that you can redefine the "On" state, and it defaults to "Yes", the "Off" value cannot be redefined, it is always "Off". This means to create code that always works, forget that there is an "On" or "Yes" state, and only test for the opposite. This will always work. Why did I make this mistake? Because I never redefine the "On" state, so I can rely on it being "Yes". With that in mind, you can do the following (I understand that you already have a working system, but just in case you will dive deeper into JavaScript programming) for the custom validation script: 

if (event.target.value == "Off") {
    this.getField("CheckBox2").display = display.hidden;
}
else {
    this.getField("CheckBox2").display = display.visible;
}

As you can see, I am now testing for the "Off" state, and I flipped the two cases around. 

[Tabby-50]

Hi,

My question is a bit similar to this one, hence I have "piggy-backed" here. I have a listings where more than one selection can be made and  output copied to a text field. However, it only copies over one selection and leaves text field blank if more than one selection is made.

Can you kindly advise

Regards

[JR Boulay]

Give the export value "Yes" to checkbox 1