0

I just would like to check all my checkboxes with JQuery. These checkboxes are created with JSF.

I tried :

$("input[type=checkbox]").each( 
        function() {              
           $(this).prop('checked', true);
// OR
           $(this).attr('checked', true);
// OR         
           $(this).attr('checked', 'checked');
          alert($(this).attr('id'));
            } 
        );

nothing works...

Can JSF be the problem ? Value of these checkboxes are linked with some managed bean boolean value.

Thanks for help.

PS : my alert() function returns id of checkboxes properly and JQuery version is :

jQuery JavaScript Library v1.8.1

Olivier J.
  • 3,115
  • 11
  • 48
  • 71
  • Have you tried jquery version 1.7.x. This might work. 1.8 series have some issues. – Jai Oct 29 '12 at 15:39
  • I don't know how to change jquery version with primefaces but I will look, ty for this advice – Olivier J. Oct 29 '12 at 15:47
  • take a look at this http://stackoverflow.com/a/10589578/617373 – Daniel Oct 29 '12 at 15:59
  • How are you rendering the checkboxes? Using the standard JSF ``? If you were using for example PrimeFaces' `` which hides the plain HTML input elements and replaces them by visually more appealing HTML divs, then your jQuery approach will obviously not work as that checks only the underlying hidden input elements, not the HTML div representations. – BalusC Oct 29 '12 at 16:18
  • @BalusC : this was the problem. See below, I have already underline this problem. Ty – Olivier J. Oct 29 '12 at 16:26
  • Your solution is hacky. I was also just asking in order to be able to post the proper answer. You never made anywhere clear how exactly you're rendering the checkboxes. – BalusC Oct 29 '12 at 16:31

3 Answers3

2

This should do the trick

$(":checkbox").prop('checked',true);

DEMO

Claudio Redi
  • 67,454
  • 15
  • 130
  • 155
1

Ok, I think I have understood the problem...

when I try this code :

$(":checkbox").prop('checked',true);
$("input[type=checkbox]").each( 
        function() {          
          alert($(this).prop('checked'));               
        } 
    );

I have always true values but I see some checkboxes unchecked...

So values are changed but visual stay the same. It's because I use JSF and it's folowwed render :

enter image description here enter image description here

This checkox is made of some CSS background etc...

So I have to change CSS of parent div (with background...) to make this checkox checked visually since its value is already set to true.

It was just a visual problem, not value problem.

Thank you

Olivier J.
  • 3,115
  • 11
  • 48
  • 71
0

Try using the plain DOM:

$("input[type=checkbox]").each(function() { this.checked = true; });

See also:

Setting "checked" for a checkbox with jQuery?

Community
  • 1
  • 1
Elias Dorneles
  • 22,556
  • 11
  • 85
  • 107