勾选表格中的所有复选框

Question

我有表格，我在每行中都放置了复选框。 并删除记录，现在我想在表的标题中放置全部选中和取消选中所有选项

下面是我的Cakephp项目的html输出。

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

湿透了。 现在我有2个复选框1用于全选，而1则取消全选，但我只想要1。如果其选中，则选择所有，如果其未选中，则全部选中

我的复选框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>

我的JavaScript已更新

<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

工作场所

在HTML中使用按钮

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

在js中使用：

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

同样，您也可以将此类提供给DELETE Header（ <ht class="btnSelectAll">delete</th> ）而不是按钮。