使用JavaScript获取widgetVar或检查/取消选中所有其他PrimeFaces复选框
我在页面上有几个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不会。 有人知道这个问题的解决方案吗?
你是对的 - 如果你像这样创建你的组件:
<p:selectBooleanCheckbox value="val" widgetVar="myCheckbox"/>
您可以通过引用其widgetVar来访问复选框,在这种情况下,调用PrimeFaces客户端API将其标记为checked:
<script>
myCheckbox.check();
</script>
然后,您可以将主复选框的onchange事件绑定到javascript方法,该方法根据主复选框的状态(将暗示将状态存储在隐藏字段中)选中或取消选中所有“从属”复选框的状态。
请注意,它可能会让您的生活更轻松,而不是处理“更改”ajax事件并在服务器端实施检查/取消选中逻辑。 只要确保提供p:ajax组件的update属性中的所有slave复选框的所有id即可:
<p:selectBooleanCheckbox id="masterChkBox" ...>
<p:ajax event="change" listener="#{yourBean.handleMasterChange}" update="...all slavecheckbox ids..."/>
</p:selectBooleanCheckbox>
链接地址: http://www.djcxy.com/p/68543.html
上一篇: Get widgetVar with JavaScript or check/uncheck all other PrimeFaces checkboxes
下一篇: Dynamicly enable/diable checkboxes in jsf with primefaces