CODEWITHSUNDEEP
phpjquerycheckboxhtml-table
Sizzling Code
Sizzling Code

Reputation: 6070

Select all checkboxes in table with jQuery

I am using checkboxes in table and I have a checkbox in tablehead.

What I am trying to accomplish is when I click the checkbox in head, all the checkboxes below in table rows should be checked..

Here is my HTML:

            <form action="<?php $_PHP_SELF ?>" method="post">
        <div class="content top">
          <table id="datatable_example" class="responsive table table-striped table-bordered" style="width:100%;margin-bottom:0; ">
            <thead>
              <tr>
                <th style="width:0px; padding-right:0px;" class="no_sort"> <label class="checkbox ">
                    <input type="checkbox" id="checkAll" name="checkAll" class="select_all">
                  </label>
                </th>
                <th style="width:200px;" class="no_sort"> Institue </th>
                <th style="width:150px;" class="no_sort"> Education </th>
                <th style="width:300px;" class="no_sort"> Description </th>
                <th style="width:150px;" class="ue no_sort"> Started </th>
                <th style="width:150px;" class="ue no_sort"> Completion </th>
                <th class="ms no_sort "> Actions </th>
              </tr>
            </thead>
            <tbody>
              <?php echo $educations ?>
            </tbody>
          </table>
          <div class="row-fluid control-group">
            <div class="pull-left span6 " action="#">
              <div>


                <div class="controls inline input-large pull-left">                    
                  <select name="bulkaction" data-placeholder="Bulk actions: " class="chzn-select " id="default-select">
                    <option value=""></option>
                    <option value="delete">Delete</option>
                  </select>
                </div>
                <button type="submit" name="submitbulkaction" class="btn btn-inverse inline">Apply</button></form>

Here is php variable $education which is used in the table..

$educations .= "<tr>
                <td><label class=\"checkbox\">
                    <input type=\"checkbox\" class=\"chkboxes\" name=\"ids[]\" value=\"$education_id\">
                  </label></td>
                <td class=\"to_hide_phone\"> $institue_name</td>
                <td class=\"to_hide_phone\"> $education_name</td>
                    <td>$education_desc</td>
                <td>$education_started</td>
                <td>$education_ended</td>
                <td class=\"ms\">
                <div class=\"btn-group1\"> 
                <a href=\"education-edit.php?id=$education_id\" class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"left\" data-original-title=\" edit \">
                <i class=\"gicon-edit\"></i></a> 
                <a class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"top\" data-original-title=\"View\">
                <i class=\"gicon-eye-open\"></i>
                </a> 
                <a class=\"btn  btn-small\" rel=\"tooltip\" data-placement=\"bottom\" data-original-title=\"Remove\"><i class=\"gicon-remove \"></i></a> 
                </div>
                </td>
              </tr>";

The Jquery behind I am trying to set..

    <script type="text/javascript">
$(document).ready(function(){
    $('#checkAll').click(function () {
        $('.chkboxes').attr('checked','checked');
    });
});
    </script>

Please tell me what is it I am doing wrong here, and how to fix the problem?

I looked in to other questions too posted about same issue checkboxes an most of them got solved, but still still when I apply the same code I don't get the result I want.

Update: I fixed the class name error as you all mentioned, Thank you, but now its some strange problem came up. I mean now it works but it don't works just like I click on checkbox and all checkboxes get selected on the go.. I had to refresh the page then all checkboxes will be selected? Whats up with that issue? Why I do need to refresh the page for that event to happen?

Upvotes: 2

Views: 4275

Answers (8)

Jobelle
Jobelle

Reputation: 2834

$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example').find('.chkboxes').prop('checked', true);
        });
});

Upvotes: 0

Jay Blanchard
Jay Blanchard

Reputation: 34416

You're trying to check a class called checkbox, not the actual checkboxes. Identify the checkbox by its type attribute - 

$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example input[type="checkbox"]').prop('checked',true);
    });
});

Upvotes: 1

Pratiksha Raikundaliya
Pratiksha Raikundaliya

Reputation: 61

For Multiple table use this

$('th input:checkbox').click(function(e) {

var table = $(e.target).closest('table'); $('td input:checkbox', table).attr('checked', e.target.checked);

});

Upvotes: 0

Daniel Correa
Daniel Correa

Reputation: 1

Simple way to do it...

$("#buttonSelectAll").click(function () { if($("#Table").find('input:checkbox:first').attr("checked")==="checked") $('#Table input:checkbox').prop('checked', false); else $('#Table input:checkbox').prop('checked', true); });

Upvotes: 0

Sacx
Sacx

Reputation: 6392

Another example:

<script type="text/javascript">
$(document).ready(function(){
  $('#checkAll').click(function () {
    $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
  });
});
</script>

You only need to add fieldset tag after <form> and closed before </form>, but only the checkboxes between fieldset tags will be checked.

http://briancray.com/posts/check-all-jquery-javascript

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

you given class as class=\"chkboxes\"

and in jquery you given 

  $('.checkboxes').attr('checked','checked');

correct it

Upvotes: 0

Ram
Ram

Reputation: 144689

$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example .chkboxes').prop('checked', true);
        // $('#datatable_example input[type=checkbox]').prop('checked', true);
    });
});

Upvotes: 4

Aram Kocharyan
Aram Kocharyan

Reputation: 20431

$('.chkboxes').attr('checked','checked');

The class is different.

Also consider using heredocs or ending the PHP with ?> and beginning again after your HTML content with <?php before closing the block.

Upvotes: 0

Related Questions