AEM 6 Touch UI Show/Hide Checkbox associated panels . It enables hiding/unhiding of other components based on the selection made in the checkbox with n number of checkbox in a dialog

.content.xml

<!-- In this example there are 2 checkbox and they control the behaviour of the corresponding sections.
Few things needs to be taken into consideration before using it
1) This value should be unique for every checkbox
show-hide-target="show-dropDown-panel"
id="show-dropDown-panel"

2)should-show-when-checked="false" this attribute will decide the behaviour of the panels or sections associated with the checkbox.
-->

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Anchor section"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <columns jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <style jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/form/select"
                            fieldLabel="Heading style"
                            name="./headingStyle">
                        <items jcr:primaryType="nt:unstructured">
                            <large jcr:primaryType="nt:unstructured"
                                    text="h2"
                                    value="h2"/>
                            <medium jcr:primaryType="nt:unstructured"
                                    text="h3"
                                    value="h3"/>
                            <small jcr:primaryType="nt:unstructured"
                                    text="h4"
                                    value="h4"/>
                        </items>
                    </style>
                    <option jcr:primaryType="nt:unstructured"
                           sling:resourceType="granite/ui/components/foundation/form/checkbox"
                            text="Hide heading in page"
                            fieldDescription="Anchor heading will only be visible in the navigation bar"
                            name="./showInNavOnly"
                            value="true"
                            class="cq-dialog-checkbox-showhide"
                            show-hide-target="show-dropDown-panel"
                            should-show-when-checked="false"/>
                    <setChildren
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/container"
                            class="hidden showhide-target"
                            id="show-dropDown-panel">
                        <items jcr:primaryType="nt:unstructured">
                            <alignmentDropDown
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/container">
                                <layout
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <alignment jcr:primaryType="nt:unstructured"
                                               sling:resourceType="granite/ui/components/foundation/form/select"
                                               fieldLabel="Alignment"
                                               name="./alignment"
                                               value="Left">
                                        <items jcr:primaryType="nt:unstructured">
                                            <left jcr:primaryType="nt:unstructured"
                                                  text="Left"
                                                  value="left"/>
                                            <right jcr:primaryType="nt:unstructured"
                                                   text="Right"
                                                   value="right"/>
                                            <center jcr:primaryType="nt:unstructured"
                                                    text="Centre"
                                                    value="center"/>
                                        </items>
                                    </alignment>
                                </items>
                            </alignmentDropDown>
                        </items>
                    </setChildren>
                    <optionBackToList jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/form/checkbox"
                            text="Show back to list link"
                            fieldDescription="If checked 'back to list' link will be visible"
                            name="./showBackToListLink"
                            value="true"
                            class="cq-dialog-checkbox-showhide"
                            show-hide-target="show-back-to-list-panel"
                            should-show-when-checked="true"/>
                    <setChildren1
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/container"
                            class="hidden showhide-target"
                            id="show-back-to-list-panel">
                        <items jcr:primaryType="nt:unstructured">
                            <backTolinkInfo
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/container">
                                <layout
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <backTolink
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                            fieldDescription="Provide value to change 'back to link' text"
                                            fieldLabel="Back to list link name"
                                            name="./backToListLinkName"/>
                                </items>
                            </backTolinkInfo>
                        </items>
                    </setChildren1>
                </items>
            </columns>
        </items>
    </content>
</jcr:root>

show-hide-checkbox.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));
        });

    });

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


    function showHide($el){

        var shouldShowWhenChecked = $el.data('should-show-when-checked'); // toggle direction
        var isChecked = $el.is(":checked");
        var targetElementSelector = $el.data('show-hide-target');
        var $targetElement = $('#' + targetElementSelector);

        var isVisible = shouldShowWhenChecked ? isChecked : !isChecked;
        $targetElement.toggleClass('hide', !isVisible);
    }
})(document,Granite.$);