How do i check all checkbox in datatable when i click on "All" checkbox in table header?

Question

I have implemented one example of data table. When i click on "all" checkbox in data table header its check and unchecked only once. Second time it not able to check all checkbox in table body. My code is following:

JSFIDDLE link click here

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
    <link href="http://cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css" rel="stylesheet">
</head>

<body>
    <h1>DataTable Checkbox</h1>
    <table class="display dataTable" id="flow-table">
        <thead>
            <th class="check">
                <input type="checkbox" id="flowcheckall" value="">&nbsp;All</input>
            </th>
            <th>Name</th>
            <!-- <th>Cookie</th> -->
            <th>Priority</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
<script>
    $(document).ready(function () {
        var str = "";
        for (i = 0; i < 25; i++) {
            a = i + 1;
            str += "<tr><td><input type='checkbox' id='checkall' name='mydata' value=" + a + "></td><td>a" + a + "</td><td>name" + a + "</td></tr>";
        }
        $("#flow-table > tbody").append(str);
        oTableStaticFlow = $('#flow-table').dataTable({
           "aoColumnDefs": [{
                         'bSortable': false,
                         'aTargets': [0]
                      }],
        });

        $("#flowcheckall").click(function () {
            if (this.checked) {
                //alert("checked");
                //$('input', oTable.fnGetNodes()).attr('checked',this.checked);
                $('#flow-table tbody input[type="checkbox"]').attr('checked', true);
            } else {
                //alert("unchecked");
                $('#flow-table tbody input[type="checkbox"]').attr('checked', false);
            }
        });
    });
</script>

</html>

Anybody help me..!

tilda · Accepted Answer · 2014-02-05 08:31:18Z

8

You can simply check/uncheck all checkboxes with this function:

  $("#flowcheckall").click(function () {
        $('#flow-table tbody input[type="checkbox"]').prop('checked', this.checked);
    });

fiddle

answered Feb 5, 2014 at 8:31

tilda

6725 silver badges8 bronze badges

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

Comments

user3221743 · Accepted Answer · 2014-02-05 08:54:37Z

0

Remove this js call

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

I tested it and it worked fine after removing this. Reason must be because the other 2 you called are version 1.10.0-beta.1 and must have conflicted with the jquery-1.10.1.min.js you were calling.

answered Feb 5, 2014 at 8:54

user3221743

772 bronze badges

Comments

David Buck · Accepted Answer · 2020-01-13 08:28:32Z

<input type='checkbox' class="sel_users" value='Anil'>Anil</option>
<input type='checkbox' class="sel_users" value='Amit'>Amit</option>
<input type='checkbox' class="sel_users" value='Mayank'>Mayank</option>
<input type='checkbox' class="sel_users" value='Sonarika'>Sonarika</option>
<input type='checkbox' class="sel_users" value='Vishal'>Vishal</option>
<input type='checkbox' class="sel_users" value='Yogesh'>Yogesh</option>

<input type='checkbox' id='checkallusers' class="checkallusers">Select All

$("#checkallusers").change(function(){
    var checked = $(this).is(':checked'); 

    // Select all
    if(checked){
       $('.sel_users').each(function() {
          $(this).prop('checked',true);
       });
    }else{
       // Deselect All
       $('.sel_users').each(function() {
         $(this).prop('checked',false);
       });
    }
});

Collectives™ on Stack Overflow

How do i check all checkbox in datatable when i click on "All" checkbox in table header?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related