CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Tim H
Tim H

Reputation: 205

Selecting all checkboxes with jQuery

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?

Upvotes: 4

Views: 420

Answers (4)

imsinu9
imsinu9

Reputation: 769

This Will Work, Short and handy Code

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

Upvotes: 0

Ujjwal Manandhar
Ujjwal Manandhar

Reputation: 2244

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

Upvotes: 1

John Hartsock
John Hartsock

Reputation: 86882

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

Upvotes: 10

amiry jd
amiry jd

Reputation: 27585

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

Upvotes: 0

Related Questions