AEM 6 Touch UI Show/Hide Checkbox Component Extension - Extension to the standard checkbox component. It enables hiding/unhiding of other components based on the selection made in the checkbox.

.content.xml

<enable
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/checkbox"
    text="Enable"
    id="enable"
    value="true"
    name="./enable"
    class="cq-dialog-checkbox-showhide"
    cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target"/>
<deleteEnable
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/hidden"
        name="./enable@Delete"
        value="true"/>
<showHideContainer
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container"
        class="hidden button-option-enable-showhide-target"
        showhidetargetvalue="true">
    <items jcr:primaryType="nt:unstructured">
        
        <!-- some components to show/hide -->
        
    </items>
</showHideContainer>

checkboxshowhide.js

/**
 * Extension to the standard checkbox component. It enables showing/hiding of other components based on the
 * selection made in the checkbox.
 *
 * How to use:
 *
 * - add the class cq-dialog-checkbox-showhide to the checkbox element
 * - add the data attribute cq-dialog-checkbox-showhide-target to the checkbox element, value should be the
 *   selector, usually a specific class name, to find all possible target elements that can be shown/hidden.
 * - add the target class to each target component that can be shown/hidden
 * - add the class hidden to each target component to make them initially hidden
 * - add the attribute showhidetargetvalue to each target component, the value should equal the value of the select
 *   option that will unhide this element.  Leave this value as an empty string to toggle the target component on
 *   when the checkbox is unchecked.
 */
(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.$);

This is exactly what I have been looking for. Glad I did another google search as I didn't find anything couple months ago.

I have one question, where would one place the .js file?

@besimhu

You can add it to a clientlibs with the cq.authoring.dialog category.

Can we do the same for tabs as well.? I mean sling:resourceType="granite/ui/components/foundation/section". I tried but not working, can you help me on this.?

It Will not work untill we change the class from "hide" to "hidden" in js .or from "hidden" to "hide" in dialog..
Thanks

I tried the above but its not working for me plz let me know do i need to change anywhere in js file

Thanks...

There is one more class we need to remove >> hidden

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

Good Luck...

Can we do the same for tabs as well.? I mean sling:resourceType="granite/ui/components/foundation/section". I tried but not working, can you help me on this.?

Can we use the same for tabs? as when i tried the same logic to show-hide tabs based on checkbox selection, it doesn't work.
Can you give a solution for the same.

While editing the component, even with checkbox selected, I cannot see the textfield. What can I do?