Show hide fields based on 2 checkboxes

[priyak]

Hello All,

I have 2 checkboxes, if either of my checkbox is true, I should show same set of fields. 

I have tried using granite:class by giving space separated 2 classes but no luck. Does anyone have any idea what I'm missing here.

Thanks in Advance!

[Sady_Rifat]

Hello @priyak ,

Firstly not sure which checkbox clientlib you are using.

But the idea you are trying to do most probably is not supported by your clientlib. Check your checkbox-show-hide clientlib how it's working.

If it's not implemented by checking multiple classes just change the code.

Hints: all you need to take the classes and insert a loop.

[priyak]

Hi @Sady_Rifat,

This is my checkbox-showhide clientlib's js:

(function(document, $) {

    "use strict";

    // when dialog gets injected

    $(document).on("foundation-contentloaded", function(e) {

        showHide($("[data-cq-dialog-checkbox-showhide]", e.target));

    });

    $(document).on("change", "[data-cq-dialog-checkbox-showhide]", function(e) {

    showHide($(this));

    });

    function showHide(el){

        el.each(function(i, element) {

            var target, value;

var type = $(element).prop("type");

            if(element && element.tagName==="CORAL-SWITCH"){

        value =  $(element).prop('checked');

        }

        target = $(element).data("cq-dialog-showhide-target");

            if (target) {

            hideUnselectedElements(target, value);

            showTarget(target, value);

            }

        });

    }

    // make sure all unselected target elements are hidden.

    function hideUnselectedElements(target){

        $(target).not(".hide").each(function() {

            $(this).addClass('hide');

        });

    }

    // unhide the target element that contains the selected value as data-showhidetargetvalue attribute

    function showTarget(target, value){

        $(target).filter("[data-showhidetargetvalue*='" + value + "'],:has([data-showhidetargetvalue*='" + value + "'])").each(function() {

            $(this).removeClass('hide');

        });

    }

})(document,Granite.$);

These are my 2 checkbox fields both are using same granite class, and in target I'm giving 2 granite classes:

So here if either of my checkbox1/checkbox2 is true, I'll have to show the target.

[Sady_Rifat]

@priyak , can you share your corresponding dialog XML code? Not necessarily the full code. You can only share the checkbox show-hide-related code. I tried to re-generate your problem. But I doubt it works for a single checkbox also.

[priyak]

@Sady_Rifat  Please find the dialog XML code related to showhide.

<checkbox1
granite:class="cq-dialog-checkbox-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./checkbox1"
text="Checkbox1"
uncheckedValue="{Boolean}false"
value="{Boolean}true">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-checkbox-showhide-target=".togglefield1"/>
</checkbox1>
<checkbox2
granite:class="cq-dialog-checkbox-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./checkbox2"
text="Checkbox 2"
uncheckedValue="{Boolean}false"
value="{Boolean}true">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-checkbox-showhide-target=".togglefield2"/>
</checkbox2>
<target
granite:class="togglefield1 togglefield2"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/well">
<items jcr:primaryType="nt:unstructured">
<textTarget
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Target"
name="./textTarget"/>
</items>
</target>

Its working fine if its for single checkbox.

[Sady_Rifat]

Hello @priyak ,

The JS and XML you provided I was unable to run. Instead of I have a clientlib that you can use and it will support as your expectation:

Component Dialog:

                    <checkbox1
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                            text="Checkbox 1"
                            name="./checkbox1"
                            uncheckedValue="{Boolean}false"
                            granite:class="cq-dialog-checkbox-showhide"
                            value="{Boolean}true">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            cq-dialog-checkbox-showhide-target=".checkbox1"/>
                    </checkbox1>
                    <checkbox2
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                            text="Checkbox 2"
                            name="./checkbox2"
                            uncheckedValue="{Boolean}false"
                            granite:class="cq-dialog-checkbox-showhide"
                            value="{Boolean}true">
                        <granite:data
                                jcr:primaryType="nt:unstructured"
                                cq-dialog-checkbox-showhide-target=".checkbox2"/>
                    </checkbox2>
                    <target
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/well"
                            granite:class="checkbox1 checkbox2">
                        <items jcr:primaryType="nt:unstructured">
                            <text
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    fieldLabel="Text Field"
                                    name="./confirmFieldMatchName"/>
                        </items>
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            showhidetargetvalue="{Boolean}true"/>
                    </target>

 Clientlib JS:

(function(document, $) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
        $(".cq-dialog-checkbox-showhide").each( function() {
            showHide($(this));
        });
    });

    $(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {
        showHide($(this));
    });

    function showHide(el){
        // get the selector to find the target elements. its stored as data-.. attribute
        var target = el.data("cqDialogCheckboxShowhideTarget");

        // is checkbox checked?
        var checked = el.prop('checked');

        // get the selected value
        // if checkbox is not checked, we set the value to empty string
        var value = checked ? el.val() : '';

        // make sure all unselected target elements are hidden.
        $(target).not(".hide").addClass("hide");

        // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
        $(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
    }
})(document,Granite.$);

[priyak]

@Sady_Rifat Thanks for that, but the script you have provided is also behaving like my script. where when I check one of them or both checkboxes the target is showing, but when I disable one checkbox the target isn't showing.

[priyak]

Issue has been resolved now. Thanks!

[kautuk_sahni]

@priyak Can you please share with the community how did you get this working? How issue got resolved? This would help in posterity. 

[priyak · Accepted solution]

sure @kautuk_sahni 

For checkbox1 I have granite class as cq-dialog-new-checkbox-showhide.

For checkbox2 I have granite class as cq-dialog-checkbox-showhide.

Here's my script:

(function (document, $) {
"use strict";

// when dialog gets injected
$(document).on("foundation-contentloaded", function (e) {
// if there is already an inital value make sure the according target element becomes visible
var element=$(".cq-dialog-new-checkbox-showhide");
var checkbox1= $(".cq-dialog-new-checkbox-showhide")[0].checked;
var target = $(element).data("cqDialogNewCheckboxShowhideTarget");

var checkbox2= $(".cq-dialog-checkbox-showhide")[0].checked;
checkboxShowHideHandler(element, target, checkbox1, checkbox2);
});

$(document).on("change", ".cq-dialog-new-checkbox-showhide", function (e) {
var checkbox2= $(".cq-dialog-checkbox-showhide")[0].checked;
var checkbox1 = $(".cq-dialog-new-checkbox-showhide")[0].checked;
var element2=$(".cq-dialog-new-checkbox-showhide");
var target2 = $(element2).data("cqDialogNewCheckboxShowhideTarget");

checkboxShowHideHandler($(this), target2, checkbox2, checkbox1);
});
$(document).on("change", ".cq-dialog-checkbox-showhide", function (e) {
var element1=$(".cq-dialog-checkbox-showhide");
var checkbox2= $(".cq-dialog-checkbox-showhide")[0].checked;
var checkbox1 = $(".cq-dialog-new-checkbox-showhide")[0].checked;
var target1 = $(element1).data("cqDialogCheckboxShowhideTarget");
checkboxShowHideHandler($(this), target1, checkbox1, checkbox2);
});

function checkboxShowHideHandler(el, target, checkbox2, checkbox1) {
el.each(function (i, element) {
if($(element).is("coral-checkbox")) {
// handle Coral3 base drop-down
Coral.commons.ready(element, function (component) {
showHide(component, element, target, checkbox2, checkbox1);
component.on("change", function () {
showHide(component, element, target, checkbox2, checkbox1);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("checkbox");
if (component) {
showHide(component, element, target, checkbox2, checkbox1);
}
}
});
}

function showHide(component, element, target, checkbox2, checkbox1) {
// get the selector to find the target elements. its stored as data-.. attribute
var $target = $(target);
$target.addClass("hide");
if (target) {
if (component.checked || checkbox1 || checkbox2) {
$target.removeClass("hide");
}
}
}
})(document, Granite.$);