jquery - Primefaces:尝试使用 jquery 和 selectBooleanCheckbox 选择所有复选框

Question

我正在尝试使用 primefaces 组件 p:selectBooleanCheckbox 和 jquery 实现全选复选框。

这是我的代码:

<p:selectBooleanCheckbox id="selectAll" onchange="selectAll(this);" itemLabel="select all"/><br/><br/>
<p:selectBooleanCheckbox id="test1" itemLabel="test1"/><br/>
<p:selectBooleanCheckbox id="test2" itemLabel="test2"/><br/>
<p:selectBooleanCheckbox id="test3" itemLabel="test3"/><br/>
<p:selectBooleanCheckbox id="test4" itemLabel="test4"/><br/>
<input type="checkbox" id="test5">test5</input><br/>
<input type="checkbox" id="test6">test6</input><br/>
<input type="checkbox" id="test7">test7</input><br/>

以及 selectAll javascript 函数:

function selectAll(checkAll) {
    var checked = checkAll.checked;      
    $(':checkbox[id*="test"]').attr('checked', checked);
}

当我选择 selectAll 复选框时，仅选中复选框 5,6 和 7。 使用 WebDeveloper，我可以验证生成的代码，并且似乎其他复选框也被选中(checked =“checked”)，尽管它们没有显示为选中。

我也尝试过:

function selectAll(checkAll) {
    var checked = checkAll.checked;                  
    $(':checkbox[id*="test"]').click();
}

但它不起作用。

我只添加了这些 HTML 复选框来测试我的 jquery。只是为了确保它正常工作。

我正在使用 Primefaces 3.0 和 Tomcat 6.0.20。

有人可以帮助我吗？提前致谢。

Answer 1

一旦选中复选框本身，问题就出在 primefaces 使用的样式类上。

为了解决这个问题，我必须更改 javascript 函数。现在看起来像这样:

function selectAll(checkAll) {
    var checked = checkAll.checked; 

    //to change the checked attribute                
    $(':checkbox[id*="test"]').attr('checked', checked);

    if (checked) {
        $('div[id*="test"] > div').each(function() {
            $(this).addClass('ui-state-active');
            $(this).children('span').addClass('ui-icon ui-icon-check');
        });
    } else {
        $('div[id*="test"] > div').each(function() {
            $(this).removeClass('ui-state-active');
            $(this).children('span').removeClass('ui-icon ui-icon-check');
        });
    }
}

这只是显示复选框选择的问题。在这种情况下，由于我使用的是primefaces，所以这完全是风格问题。

感谢那些试图帮助我的人。