How to hide and show form elements based on a checkbox value

Hiding and showing a question based upon the selected values of multiple checkbox values requires a different syntax than a text question. The use of the "indexOf" JavaScript method is required.

A checkbox store its values in a JavaScript Array, which can contain multiple selections. As an example the following check box question could contain the value of any combination of "a", "b", and "c".

To evaluate if a checkbox question contains one or more specific values the array must be evaluated for the values. The indexOf method is used to determine if the value(s) are in the array.

indexOf JavaScript Method

The indexOf method returns the location in the array where the string is found. For example if the string is found in the first element of the array 0 is returned. If the string is found in the 3rd element 2 is returned. If it is not found -1 is returned. Therefore if any value greater than or equal (>=) 0 is returned, the string is found in the array.

Example

• values('Checkbox Question').indexOf("a")>=0

Display Condition

The logic will be appled to the "Visible" property of the question to be conditionally displayed and hidden. In the example below the text question will be diplayed if the checkbox question is "a" or "c".

Checking for Multiple values

Logic can be used to check for value1 AND value2. Logic can also be used to check for value1 OR value2

AND

values('Checkbox Question').indexOf("a")>=0 && values('Checkbox Question').indexOf("c")>=0

OR

values('Checkbox Question').indexOf("a")>=0 || values('Checkbox Question').indexOf("c")>=0