我想知道如何使用javascript检查基于p:selectManyCheckbox的f:items值。
我做的是 Xhtml
<p:selectBooleanCheckbox itemLabel="Select All" onchange="changeSelectAllStatus(this);"
value="#{myBean.selectAllStatus}"
id="selectAllStatus" style="margin-left:4px;" >
</p:selectBooleanCheckbox>
<p:selectManyCheckbox onchange="changeServiceStatus(this);"
styleClass="servicestatusstyle"
value="#{myBean.serviceStatusFilterList}"
layout="pageDirection" id="empListSub">
<f:param name="tabValue" value="1" />
<f:selectItems value="#{myBean.serviceStatusList}" var="status"
itemLabel="#{status.title}" itemValue="#{status.id}"/>
</p:selectManyCheckbox>
生成的html是
的Javascript
function changeSelectAllStatus(element)
{
var selectAll = element.checked;
var serviceStatusChildNodes = document.getElementById("accord:empListSub").getElementsByTagName('input');
for ( var i in serviceStatusChildNodes ) {
if ( serviceStatusChildNodes[i].type=='checkbox' ) {
serviceStatusChildNodes[i].checked = selectAll;
}
}
if(selectAll)
{
selectAllStatusArray = selectAll;
}
else
{
selectAllStatusArray = selectAll;
}
}
我的问题是什么时候选择所有&#39;如果选中,则f:items选中的值被设置为true,但在用户界面中没有被选中。 谁能指出我哪里出错?
答案 0 :(得分:3)
只需你可以这样做:
<p:selectBooleanCheckbox itemLabel="Check All"
widgetVar="checkAllWV"
onchange="selectAllCheckBoxes(PF('manyCheckWV'))">
</p:selectBooleanCheckbox>
<p:selectManyCheckbox widgetVar="manyCheckWV">
<f:selectItems value="#{mainBean.list}"/>
</p:selectManyCheckbox>
booleanCheckbox的onchange
将控制manyCheckbox值。
现在改变事件
function selectAllCheckBoxes(manyCheckBoxes) {
manyCheckBoxes.inputs.each(function() {
if(PF('checkAllWV').isChecked()) {
$(this).prop('checked', false)
PF('checkAllWV').jq.find('.ui-chkbox-label').text('Uncheck all')
} else {
$(this).prop('checked', true)
PF('checkAllWV').jq.find('.ui-chkbox-label').text('Check all')
}
$(this).trigger('click');
})
}
您可以在github上找到一个小例子。