在cq5小部件中隐藏和显示基于对话框中的复选框

Question

我有一个实现，我的单选按钮组必须显示并隐藏基于复选框。我刚刚包含了一个Cq：面板，其中包含一个复选框和一个单选按钮组（包含两个单选按钮）的小部件。我在我的jsp中获取这些值并相应地进行操作。我的问题是，当作者检查/取消选中复选框时，我可以显示/隐藏此单选按钮组，因为单选按钮组依赖于复选框。当取消选中复选框时隐藏此组时，这将是令人愉快的。我已经通过api，但我找不到。任何人都可以帮我这个。提前谢谢。

Answer 1

是的，您可以通过将侦听器附加到选中该复选框时触发的selectionchanged事件来实现此目的。 API提供了为窗口小部件触发的公共事件列表。

为了将侦听器附加到事件，您需要在所需的窗口小部件下创建一个名为listeners的类型为nt：unstructured的节点，并将事件名称作为属性添加到节点，其值将为你想要执行的处理函数。

在您的情况下，该属性应为selectionchanged，其值应为满足您要求的函数，如下所示

function(comp, val, isChecked) {
    var panel = comp.findParentByType("panel"); //find the parent panel container
    var rdg = panel.getComponent("rdg"); //find the component with itemId rdg

    /*hide or show component based on checked value */
    isChecked ? rdg.hide() : rdg.show(); 
}

面板内对话框的结构是

<dialog jcr:primaryType="cq:Dialog" title="Test Component" xtype="panel">
    <items jcr:primaryType="cq:WidgetCollection">
        <chkbox jcr:primaryType="cq:Widget" fieldLabel="Show radio buttons" name="./show" type="checkbox" xtype="selection">
            <listeners jcr:primaryType="nt:unstructured" selectionchanged="function(comp, val, isChecked) { 
                var panel = comp.findParentByType("panel"); 
                var rdg = panel.getComponent("rdg"); 
                isChecked ? rdg.show() : rdg.hide(); 
            }"/>
        </chkbox>
        <link jcr:primaryType="cq:Widget" fieldLabel="Select one" itemId="rdg" name="./rad" type="radio" xtype="selection">
            <options jcr:primaryType="cq:WidgetCollection">
                <radio1 jcr:primaryType="cq:Widget" text="Yes" value="T"/>
                <radio2 jcr:primaryType="cq:Widget" text="No" value="F"/>
            </options>
        </link>
    </items>
</dialog>