如何通过单击复选框

时间:2016-08-18 07:17:58

标签: javascript jsf checkbox

我有一个panelgroup,它有一个outputText和一个href链接。我希望此面板组基于以下方式的复选框值进行渲染

    当选中复选框的值(true)时,
  1. panelgroup应该呈现 页面加载。
  2. 如果默认情况下未选中复选框的值(在PageLoad上),则表示 如果用户单击了复选框,则不应显示panelgroup 小组应该可见。
  3. 问题:如果默认情况下未选中该复选框,并且用户点击复选框,则表单组未显示。我认为因为它没有在页面加载时渲染因此onClick它无法找到隐藏/显示任何范围

    这是小组代码:

    <h:panelGroup
                                        styleClass="showMsg#{valNumber}"
                                        rendered="#{dataItem.checkboxVal}">
    
                                        <h:outputText
                                            styleClass="showMsg#{valNumber}"
                                            style="margin-top: 18px; text-align: center;"
                                            value="Text Line1" escape="false"
                                            rendered="#{dataItem.checkboxVal}" />
                                        <f:verbatim>
                                            <br />
                                        </f:verbatim>
                                        <h:outputText
                                            styleClass="showMsg#{valNumber}"
                                            style="text-align: center;" value="Text Line 2"
                                            escape="false"
                                            rendered="#{dataItem.checkboxVal}" />
                                        <f:verbatim>
                                            <br />
                                            <wps:urlGeneration
                                                <a id="xyz" href="<%wpsURL.write(out);%>">ContactUs</a>
                                            </wps:urlGeneration>
                                        </f:verbatim>
                                    </h:panelGroup>
    

    如果我单击复选框,则不显示面板组。这是我的点击javascript功能。

    <h:selectBooleanCheckbox id="xyz" styleClass='mycheckbox#{valNumber}' 
    onclick="showShippingMsg(this,'#{valNumber}' ); "
    
    
    
       function showShippingMsg(checkbox, valNum){
    
            if(checkbox.checked){
                $(".showMsg"+valNum).css("display", "block");
             } else {
             $(".showMsg"+valNum).css("display", "none");
             }
        }
    

3 个答案:

答案 0 :(得分:0)

好吧,你总是可以使用JSF ajax功能。 以下是示例代码:

<h:panelGroupid="panel">
    <h:panelGroup rendered="#{bean.checkboxValue}">
        <!-- your content here -->
    </h:panelGroup>
</h:panelGroup>

<h:selectBooleanCheckbox value="#{bean.checkboxValue}">
    <f:ajax event="change" render="panel"/>
</h:selectBooleanCheckbox>

现在,当复选框值将true更改为false或false更改为true时(单击它时),ajax将触发bean中checkboxValue的setter方法,并将在您的JSF组件上启动重新呈现,其中id设置为render属性(在本例中为id="panel"),如果checkboxValue为true,则应该呈现它。因此,如果checkboxValue为true,则呈现的h:panelGroup属性也将为true,反之亦然。

在你的bean中,checkboxValue应该设置如下:

public boolean checkboxValue;

public void setCheckboxValue(boolean checkboxValue) {
    this.checkboxValue = checkboxValue;
}

public boolean getCheckboxValue() {
    return this.checkboxValue;
}

有道理吗?

修改

请注意,h:selectBooleanCheckbox组件应嵌套在h:form中,以便将checkboxValue发布到bean。

编辑2

如果使用ajax,你应该尝试重新渲染整个dataTable(如果dataTable存储大量数据,那不是一个好主意)。如果这对您不起作用,您可以尝试将面板组的styleClass设置为类似styleClass="your_panel_style_class#{valNumber} #{not dataItem.checkboxVal ? 'style_class_to_hide_panel' : ''}"的内容,这将基于checkboxVal设置base styleClass。然后摆脱面板上的rendered属性。

.style_class_to_hide_panel {
    display: none;
}

然后你可以尝试将它放在复选框的onlcick属性中

function togglePanel(valNumber) {
    var panel = $('.your_panel_style_class' + valNumber);

    if (panel === undefined) {
        // find your panel and select it
    }

    panel.toggleClass('style_class_to_hide_panel');
} 

不确定jQuery脚本的可靠性如何。

答案 1 :(得分:0)

您可以使用JSF ajax将复选框值提交给bean并重新呈现页面的一部分。一个常见的错误是尝试重新渲染具有呈现属性的相同元素。在这种情况下,如果您的初始渲染值为false,则您的panelGroup根本不会渲染。因此,ajax rerender将无法在DOM中找到引用的ID。

我曾经创建一个带有ID的包装元素,它总是被渲染,所以我可以在ajax渲染属性中引用它的ID。当ajax触发渲染时,它可以更新它的子元素,可以选择渲染它。

一个简单的示例bean:

import java.io.Serializable;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

@Named("test")
@ViewScoped
public class TestBean implements Serializable{

    private static final long serialVersionUID = -1064219566884774973L;

    private boolean checkboxValue;

    public void setCheckboxValue(boolean checkboxValue) {
        this.checkboxValue = checkboxValue;
    }

    public boolean getCheckboxValue() {
        return checkboxValue;
    }
}

和xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
        <h:form>
            <h:selectBooleanCheckbox value="#{test.checkboxValue}" >
                <f:ajax event="change" render="wrapper"/>
            </h:selectBooleanCheckbox>
        </h:form>
        <h:panelGroup id="wrapper">
            <h:panelGroup rendered="#{test.checkboxValue}">
                <h:outputText value="Checkbox selected" />
            </h:panelGroup>
        </h:panelGroup>
</h:body>
</html>

另一种解决方案,如果您不需要bean中的checkbox值,则仅在客户端使用它。这个xhtml不使用任何支持bean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
        <h:form>
            <h:selectBooleanCheckbox binding="#{checkboxItem}" >
                <f:ajax event="change" render="wrapper"/>
            </h:selectBooleanCheckbox>
        </h:form>
        <h:panelGroup id="wrapper">
            <h:panelGroup rendered="#{checkboxItem.value}">
                <h:outputText value="Checkbox selected" />
            </h:panelGroup>
        </h:panelGroup>
</h:body>
</html>

答案 2 :(得分:0)

我尝试了以下方法并且工作正常。

<h:panelGroup

style="#{dataItem.checkboxVal ? 'display:block;':'display:none;'}"
styleClass="showMsg#{valNumber}">

<h:outputText
styleClass="showMsg#{valNumber}"
style="margin-top: 18px; text-align: center;"
value="Text Line1" escape="false"/>

<h:outputText
styleClass="showMsg#{valNumber}"
style="text-align: center;" value="Text Line 2"
escape="false"/>
<f:verbatim>
<wps:urlGeneration
<a id="xyz" href="<%wpsURL.write(out);%>">ContactUs</a>
                                        </wps:urlGeneration>
                                    </f:verbatim>
                                </h:panelGroup>