CODEWITHSUNDEEP
jquerycheckboxprimefaces
sabrina.bettini
sabrina.bettini

Reputation: 111

Primefaces: trying to selecting all checkboxes using jquery and selectBooleanCheckbox

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.

Upvotes: 4

Views: 12588

Answers (4)

snakedog
snakedog

Reputation: 367

Sabrina! Thank you so much for pointing me in the right direction. The crux of the problem as you pointed out is that the PF checkboxes do not resolve to JSF checkboxes - their state is implied by their styles, not a state that you can query with any checkbox method like value() or checked(). This is a little misleading but it does result in more flexible checkboxes. So clever of you to use .children() and .add/removeClass() methods I would not have thought of.

For PF 6.1 I had to modify your code a bit. The difference between the checked and unchecked state was presence/absence of the ui-state-active style on the containing <div> box and of ui-icon-checked and ui-icon-blank on the contained <span>.

 function selectAll(checkAll) {
    var checked = checkAll.checked; 
    //to change the checked attribute                
    $(':checkbox[id*="cloneCheckBox"]').attr('checked', checked);
    if (checked) {
        $('div[id*="cloneCheckBox"] > div').each(function() {
            $(this).addClass('ui-state-active');
            $(this).children('span').addClass('ui-icon-check');
            $(this).children('span').removeClass('ui-icon-blank');
        });
   } else {
        $('div[id*="cloneCheckBox"] > div').each(function() {
            $(this).removeClass('ui-state-active');
            $(this).children('span').removeClass('ui-icon-check');
            $(this).children('span').addClass('ui-icon-blank');
        });
    }
}

I hope this helps someone using later versions of PF. I hate doing all that ajax traffic for functionality that is purely client side.

Upvotes: 0

Jukar Penz
Jukar Penz

Reputation: 1

If this can be helpful for someone, I made this code to UNSELECT all the radio buttons from a form,,,

I needed because I had an accordion panel and in every tab I had a selectOneRadio, but when changing from a tab I need to unselect all of the other table's radios.

You can skip custom IDs and of course you skip the current radio checking

PrimeFaces 4.0

<p:selectOneRadio onchange="workThere(this)"

And here the function

        function workThere(e) {
            //alert(e.type + ' - ' + e.parentNode.type);
            var radios = jQuery("input:radio:checked");

            for (var i = 0; i  &lt; radios.length; i++) {
                //escape currentId
                if( (radios[i].id.indexOf(e.id)) &gt; -1 ){
                    continue;
                }
                //escape seleccionador de tipo
                if( (radios[i].id.indexOf('inputTipoLtg')) &gt; -1 ){
                    continue;
                }

                $(radios[i].parentNode.parentNode.children[1]).removeClass('ui-state-active');
                $(radios[i].parentNode.parentNode.children[1]).children('span').removeClass('ui-icon ui-icon-bullet');
                $(radios[i]).attr('checked', false);

            }                                
        }
        ;

Upvotes: 0

sabrina.bettini
sabrina.bettini

Reputation: 111

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.

Upvotes: 4

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

jQuery does not know that p:selectBooleanCheckbox is to be treated like a checkbox. As a result of that, the :checkbox selector does not recognize it.

You might also want to consider using ^= instead of *= in the attribute selector for the id, if you only want to match ids beginning with "test" and not something like id="footestbar".

Upvotes: -1

Related Questions