Get widgetVar with JavaScript or check / uncheck all other PrimeFaces checkboxes

Question

I have several PrimeFaces checkboxes on the page. If you select the wizard check box, all other check boxes should be checked / unchecked. With simple HTML checkboxes this will be a simple problem. But since PrimeFaces does not show the checkbox, but the image, the following JavaScript code does not work:

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

I know that I can use widgetVar PrimeFaces to toggle flags, but I don't know how to get PrimeFaces widget objects using JavaScript. I think RichFaces adds a component property to the DOM element, but PrimeFaces does not. Does anyone know a solution to this problem?

Answer 1

You were right - if you create your component as follows:

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

You can access this flag simply by accessing its widgetVar, in which case call the PrimeFaces client API to mark it as checked:

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

Then you can bind the onchange event of your main flag to the javascript method, which checks or cancels the state of all flags "slave" depending on the state of the main field (prompting you to save the state in a hidden field).

Note that this can make your life easier to handle the ajax "change" event instead and implement the server side check / uncheck logic. Just make sure that you provide all the identifiers of all the sub flags in the update attribute of the p: ajax component:

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