如何顯示隱藏面板組點擊複選框

Question

我有一個panelgroup有一個outputText和一個href鏈接。我想這對panelGroup中渲染基於複選框值以下方式時複選框的值被選中（真）上 頁面加載

1. panelGroup中應該呈現。
2. 如果默認情況下（在pageLoad上）未選中複選框的值，則 面板組應該不可見，但如果用戶單擊了複選框 ，則面板組應該是可見的。

問題：如果該複選框默認情況下不與用戶點擊選中複選框然後未被顯示panelGroup中。我想是因爲它不是在頁面加載渲染所以的onClick它不能找到任何跨度隱藏/顯示

這裏是panelGroup中代碼：

<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> 

如果我在複選框點擊，那麼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"); 
     } 
    } 

Answer 1

那麼，你總是可以使用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> 

現在，當複選框值變化時真亦假或假爲真（當你點擊它），阿賈克斯將火checkboxValue setter方法在bean和將啓動重新 - 在渲染屬性中設置id的JSF組件上呈現（在本例中爲id="panel"），如果checkboxValue爲true，則應呈現它。因此，如果checkboxValue爲true，那麼h:panelGroup屬性也將爲真，反之亦然。

而且在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。

EDIT 2

在使用AJAX的情況下，你應該嘗試重新渲染整個dataTable的（不是一個真正的好主意，如果dataTable的存儲大量數據）。如果這不適合你，你可以嘗試爲面板組設置styleClass爲styleClass="your_panel_style_class#{valNumber} #{not dataItem.checkboxVal ? 'style_class_to_hide_panel' : ''}"，這將基於checkboxVal設置基本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腳本怎麼會適合你。