使用 JavaScript 获取 widgetVar 或选中/取消选中所有其他 PrimeFaces 复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11427647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get widgetVar with JavaScript or check/uncheck all other PrimeFaces checkboxes
提问by Joel Richard
I have several PrimeFaces checkboxes on a page. If you click the master checkbox, all other checkboxes should be checked/unchecked. With plain HTML checkboxes this would be an easy issue. But because PrimeFaces does not show the checkbox itself, but an image, the following JavaScript code does not work:
我在一个页面上有几个 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>
I know that I could use the PrimeFaces widgetVar to toggle the checkboxes, but I do not know how to get the PrimeFaces widget objects with JavaScript. I think RichFaces adds the component property to the DOM element, but PrimeFaces does not. Does somebody know a solution for this problem?
我知道我可以使用 PrimeFaces widgetVar 来切换复选框，但我不知道如何使用 JavaScript 获取 PrimeFaces 小部件对象。我认为 RichFaces 将组件属性添加到 DOM 元素，但 PrimeFaces 没有。有人知道这个问题的解决方案吗？
回答by BestPractices
You were correct -- if you create your component like this:
你是对的——如果你像这样创建你的组件：
<p:selectBooleanCheckbox value="val" widgetVar="myCheckbox"/>
You can access the checkbox simply by refering to its widgetVar, in this case calling the PrimeFaces client-side API to mark it as checked:
您可以通过引用它的 widgetVar 来访问复选框，在这种情况下调用 PrimeFaces 客户端 API 将其标记为已选中：
<script>
myCheckbox.check();
</script>
You could then tie the onchange event of your master checkbox to a javascript method that checked or unchecked the state of all the "slave" checkboxes depending on the state of the master checkbox (would suggest you store the state in a hidden field).
然后，您可以将主复选框的 onchange 事件绑定到一个 javascript 方法，该方法根据主复选框的状态检查或取消选中所有“从属”复选框的状态（建议您将状态存储在隐藏字段中）。
Note, it may make your life easier to instead handle the "change" ajax event and implement the check/uncheck logic on the server side. Just make sure that you provide all the ids of all the slave checkboxes in the update attribute of the p:ajax component:
请注意，处理“更改”ajax 事件并在服务器端实现检查/取消检查逻辑可能会让您的生活更轻松。只需确保在 p:ajax 组件的更新属性中提供所有从属复选框的所有 ID：
<p:selectBooleanCheckbox id="masterChkBox" ...>
<p:ajax event="change" listener="#{yourBean.handleMasterChange}" update="...all slavecheckbox ids..."/>
</p:selectBooleanCheckbox>
