Question

I am trying to implement a Select All checkbox using primefaces component p:selectBooleanCheckbox and jquery.

Here is my code:

<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/>

And the selectAll javascript function:

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

When I select the selectAll checkbox, only checkboxes 5,6 and 7 are checked.
Using WebDeveloper I could verify the generated code and it seems that the other checkboxes are also checked (checked = “checked”), although they are not displayed checked.

I also tried:

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

And it did not work.

I only added those HTML checkboxes to test my jquery. Just to make sure it was working.

I am using Primefaces 3.0 and Tomcat 6.0.20.

Can anyone help me? Thanks in advance.

Answer 1

The problem was with the style classes primefaces uses, once the checkbox itself was being checked.

To solve it I had to change the javascript function. Now it looks like this:

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');
        });
    }
}

It was all a matter of displaying the selection of the checkbox. And in this case, as I was using primefaces, it was all a matter of styles.

Thanks for those who tried to help me.