Madhu Anbalagan's Blog

    public class ConditionalViewModel : FieldViewModel
    {
        public string TargetField { get; set; }
        public string TrueValue { get; set; }

        protected override void InitItemProperties(Item item)
        {
            base.InitItemProperties(item);

            TargetField = StringUtil.GetString(item.Fields["Target Field"]);
            TrueValue = StringUtil.GetString(item.Fields["Show Value"]);
        }

        protected override void UpdateItemFields(Item item)
        {
            base.UpdateItemFields(item);

            item.Fields["Target Field"]?.SetValue(TargetField, true);
            item.Fields["Show Value"]?.SetValue(TrueValue, true);
        }
    }

@using Sitecore.ExperienceForms.Models
@using Sitecore.ExperienceForms.Mvc.Html
@using Sitecore.Mvc
@model  Sitecore.Project.Example.Views.CustomControl.ConditionalViewModel

@{
    var viewModel = Model is IViewModel vModel ? vModel : null;
}

<div @(Sitecore.Context.Request.QueryString["sc_formmode"] != null ? "" : "hidden") class="@Model.CssClass cond-@Model.targetField-@Model.trueValue">
    @Html.RenderFields(viewModel)
</div>

@if (Sitecore.Context.Request.QueryString["sc_formmode"] == null)
    {
        <script type="text/javascript">
            const condArr = [];

            function initConditional() {
                const conditionals = document.querySelectorAll('[class*="cond-"');
                conditionals.forEach((e) => {
                    e.className.split(" ").forEach((c) => {
                        if (c.includes('cond-')) {
                            condArr.push(parseClassName(c));
                        }
                    });
                });
                condArr.forEach((cond) => {
                    const element = document.getElementsByClassName(cond.field_name)[0];
                    element.setAttribute("data-cond", cond.field_name);
                    element.onchange = () => {
                        conditionalChange(element, condArr);
                    }
                });
            }

            function conditionalChange(element, condArr) {
                condArr.forEach((cond) => {
                    if (cond.field_name === element.getAttribute("data-cond")) {
                        if (cond.value === element.value) {
                            document.getElementsByClassName(cond.class)[0].removeAttribute("hidden");
                        } else {
                            document.getElementsByClassName(cond.class)[0].setAttribute("hidden", "true");
                        }
                    }
                })
            }

            function parseClassName(class_name) {
                const arr = class_name.split("-");
                if (arr.length < 3) {
                    console.log(`Malformed className: ${class_name}`);
                } else {
                    const obj = {
                        class: class_name,
                        field_name: arr[1],
                        value: arr[2]
                    }
                    return obj;
                }
            }

            initConditional();
        </script>