Selecting all checkboxes with jQuery

Question

I simply want to check all of the check boxes on a page if a user clicks the "Select All" button.

In the body:

<button id="checkall">Select All</button>

jQuery:

<head>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('#checkall').click(function () {
            $("input[type=checkbox]").each( function() {
            $(this).attr('checked', true);
        });
    });
    </script>
</head>

And the checkboxes are generated by a little bit of php:

echo '<li>';
echo '<input type="checkbox" name="checkbox[]" value="'.$x.'" />'.$x.'<br/>';
echo '</li>';

Can anyone tell me what I'm doing wrong?

John Hartsock · Accepted Answer · 2011-10-06 12:50:33Z

10

You dont need the each statement. Just select all checkboxes and set the property checked = true.

$(document).ready(function(){
    $('#checkall').click(function () {
        $("input:checkbox").prop('checked', true);
    });
});

Note jQuery.prop() is a feature added to 1.6 and up. If you are on a version of jQuery prior to 1.6 you will need the following.

$(document).ready(function(){
    $('#checkall').click(function () {
        $("input:checkbox").attr('checked','checked');
    });
});

edited Oct 6, 2011 at 12:50

answered Sep 21, 2011 at 15:08

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user610217 Over a year ago

bear in mind this will only check the boxes. Additional code will be necessary for unchecking.

John Hartsock · Accepted Answer · 2011-11-04 19:45:01Z

1

Instead of selecting checkbox with tag name better assign it some class and select it with classname

  $(document).ready(function(){
      $('#checkall').click(function () {
           $(".checkbox").each( function(i,chkbox) {
             $(chkbox).attr('checked', true);
      });
     });
   });

php code

                 echo '<li>';
                echo '<input type="checkbox" class="checkbox" name="checkbox[]" value="'.$x.'" />'.$x.'<br/>';
                echo '</li>';

edited Nov 4, 2011 at 19:45

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

answered Sep 21, 2011 at 15:11

Ujjwal Manandhar

2,25417 silver badges20 bronze badges

1 Comment

pimvdb Over a year ago

This still has one }); too few, and .each is kind of redundant here.

amiry jd · Accepted Answer · 2011-09-21 15:27:23Z

0

You just miss a }); for the .each(function(){} statement! There was no error else!

$(document).ready(function () {
    $('#checkall').click(function () {
        $("input[type=checkbox]").each(function () {
            $(this).attr('checked', 'checked');
            // or 
            // $(this).attr('checked', true);
        }); // you missed this one!!!
    });
});

answered Sep 21, 2011 at 15:27

amiry jd

27.7k31 gold badges121 silver badges222 bronze badges

1 Comment

John Hartsock Over a year ago

jQuery.each() is not needed.

imsinu9 · Accepted Answer · 2014-06-10 09:39:08Z

0

This Will Work, Short and handy Code

<script>
    $('#check_all').click(function () {
    $( this ).closest('form').find(':checkbox').prop( 'checked' , this.checked ? true : false );
})
</script>

answered Jun 10, 2014 at 9:39

imsinu9

7698 silver badges12 bronze badges

Collectives™ on Stack Overflow

Selecting all checkboxes with jQuery

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related