Tick all checkboxes in table

Question

i have table in that i put check box in every row. and delete records now i want to put check all and uncheck all option in header in my table

below is my html output of my cakephp project.

<form action="/" id="OrderOrderForm" method="post" accept-charset="utf-8">
    <div style="display:none;">
        <input type="hidden" name="_method" value="POST" />
    </div>
    <table class="table table-bordered table-hover">
        <th>Name</th>
        <th>Email</th>
        <th>phone</th>
        <th>view</th>
        <th>delete</th>
        <thead>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>89</td>
                <td>9</td>
                <td>7</td>
                <td>
<a href="/orders/view/33" title="VIEW" class="fa fa-search"></a>

                </td>
                <td>
                    <input type="checkbox" name="order_id[]" value="33" hiddenField="false">
                </td>
            </tr>
            <tr>
                <td>89</td>
                <td>9</td>
                <td>7</td>
                <td>
<a href="/orders/view/34" title="VIEW" class="fa fa-search"></a>

                </td>
                <td>
                    <input type="checkbox" name="order_id[]" value="34" hiddenField="false">
                </td>
            </tr>
        </tbody>
    </table>
    <input class="btn btn-primary" title="Submit" type="submit" value="Delete selected" />
    </div>
    </div>
    </br>
    </div>
    <!-- /.row -->

udpated. now i got 2 check box 1 for select all and 1 for deselect all but i want only 1. if its checkd then select all and if its uncheckd then delect all

my check box html

  <th>
            <input type="checkbox" name="" value ="Select all" class="btnSelectAll" title="selectall" >

<input type="checkbox" name="" value ="Select all" class="btnUnSelectAll" title="unselect" ></th>

my javascript updated

<script type="text/javascript">

$(".btnSelectAll").click(function(){
    $("input[name='order_id[]']").prop('checked', true);
});

$(".btnUnSelectAll").click(function(){
    $("input[name='order_id[]']").prop('checked', false);
});
</script>

Answer 1

Working FIDDLE

Use Button in HTML

<input  class="btnSelectAll" title="Submit" type="button" value="Tick selected"/> 

In js use:

//After you click the button , execute the anonmous function block.
$(".btnSelectAll").click(function(){
    //Select All chackboxes having name as order_id[] And Tick it.
    $("input[name='order_id[]']").prop('checked', true);
});

Also you can give this class to DELETE Header ( <ht class="btnSelectAll">delete</th> ) also instead of button.