使用JavaScript獲取小部件花率或選中/取消選中所有其他PrimeFaces複選框

Question

我在頁面上有幾個PrimeFaces複選框。如果您單擊主複選框，則應該選中/取消選中所有其他複選框。用普通的HTML複選框，這將是一個簡單的問題。但因爲PrimeFaces不顯示覆選框本身，而是圖像，下面的JavaScript代碼不起作用：

<script type="text/javascript"> 
$(document).ready(function() { 
    var masterCheckbox = $(".ui-chkbox.master :checkbox"); 
    var slaveCheckboxes = $(".ui-chkbox:not(.master) :checkbox"); 

    updateMaster(); 
    masterCheckbox.change(updateSlaves); 
    slaveCheckboxes.change(updateMaster); 

    function updateMaster() { 
     var allSlavesChecked = true; 
     slaveCheckboxes.each(function() { 
      if (!$(this).is(':checked')) { 
       allSlavesChecked = false; 
      } 
     }); 
     masterCheckbox.attr("checked", allSlavesChecked); 
    } 

    function updateSlaves() { 
     var masterChecked = masterCheckbox.is(":checked"); 
     slaveCheckboxes.each(function() { 
      $(this).attr("checked", masterChecked); 
     }); 
    } 
}); 
</script> 

我知道，我可以使用PrimeFaces widgetVar切換複選框，但我不知道該怎麼使用JavaScript獲取PrimeFaces小部件對象。我認爲RichFaces會將組件屬性添加到DOM元素，但PrimeFaces不會。有人知道這個問題的解決方案嗎？

Answer 1

你是正確的 - 如果你創建組件是這樣的：

<p:selectBooleanCheckbox value="val" widgetVar="myCheckbox"/> 

您可以通過簡單地指的其widgetVar訪問複選框，在這種情況下調用PrimeFaces客戶端API將其標記爲檢查：

<script> 
    myCheckbox.check(); 
</script> 

然後，你可以配合你的主複選框的onchange事件到選中或取消選中根據主複選框的狀態所有的「奴隸」複選框的狀態的JavaScript方法（建議您存儲隱藏字段中的狀態）。

請注意，它可能會讓您的生活更輕鬆，而不是處理「更改」ajax事件並在服務器端實施檢查/取消選中邏輯。只要確保提供p：ajax組件的更新屬性中的所有從屬複選框的所有ID即可：

<p:selectBooleanCheckbox id="masterChkBox" ...> 
    <p:ajax event="change" listener="#{yourBean.handleMasterChange}" update="...all slavecheckbox ids..."/> 
</p:selectBooleanCheckbox>