使用JavaScript获取widgetVar或选中/取消选中所有其他PrimeFaces复选框
Get widgetVar with JavaScript or check/uncheck all other PrimeFaces checkboxes
我在一个页面上有几个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小部件Var来切换复选框,但我不知道如何使用JavaScript获取PrimeFace小部件对象。我认为RichFaces将component属性添加到DOM元素中,但PrimeFaces没有。有人知道这个问题的解决办法吗?
你是对的——如果你创建这样的组件:
<p:selectBooleanCheckbox value="val" widgetVar="myCheckbox"/>
您可以简单地通过引用其小部件Var来访问复选框,在这种情况下,调用PrimeFaces客户端API将其标记为已选中:
<script>
myCheckbox.check();
</script>
然后,您可以将主复选框的onchange事件与一个javascript方法绑定,该方法根据主复选框状态检查或取消检查所有"从属"复选框的状态(建议您将状态存储在隐藏字段中)。
请注意,处理"更改"ajax事件并在服务器端实现check/uuncheck逻辑可能会让您的生活更轻松。只需确保在p:ajax组件的更新属性中提供所有从属复选框的所有id
<p:selectBooleanCheckbox id="masterChkBox" ...>
<p:ajax event="change" listener="#{yourBean.handleMasterChange}" update="...all slavecheckbox ids..."/>
</p:selectBooleanCheckbox>
相关文章:
- 如何添加浮动和非浮动,其他
- 与其他库的jQuery.noConflict()
- 播放当前视频时如何停止其他视频?JavaScript
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 当我点击jsf中的primefaces命令按钮时,如何获得点击事件
- 除修剪外的其他功能
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- Array.length似乎不起作用;console.log则显示其他情况
- 如何消除代码中的未定义和其他问题
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 为什么不推荐使用“with”?是否有更好或其他方法可以“下降”到对象的命名空间
- Jquery未定义函数正在停止其他操作
- 如何将我的javascript库公开给其他客户端使用
- primefaces日历可以禁用过去的日期和时间吗
- Javascript阻止其他Javascript代码
- 使用JavaScript获取widgetVar或选中/取消选中所有其他PrimeFaces复选框
- Primefaces JS 在其他资源之前插入,导致错误
- Primefaces防止其他组件渲染