Selecting all checkboxes with jQuery_问答_开发者

开发者 https://www.devze.com 2023-04-06 05:50 出处：网络

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

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?

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

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

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

This Will Work, Short and handy Code

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