javascript - iCheck复选框全选，并刷新数据表

我在 bootstrap 中使用iCheck来显示复选框样式，但是我遇到了一些我无法选中/取消选中所有问题的问题，并且dotn工作会及时刷新数据表，需要刷新页面，或者页面刷新了它的框。

和高级或公共(public)复选框，当我选择它时，它将保持选中状态，当我重新加载页面时，

<div class="table-responsive">
    <table class="table">
        <!-- Start Header -->
        <thead>
            <tr>
                <th>
                    <label class="checkbox checkbox-inline">
                        <input type="checkbox" name="file_id" value="0">
                    </label>
                </th>
                <th>Text Name</th>
                <th>Sixe Date</th>
                <th>Created Date</th>
                <th>Something</th>
                <th>Premium</i>
                </th>
                <th>Public</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <label class="checkbox checkbox-inline">
                        <input id="check" type="checkbox" name="file_id">
                    </label>
                </th>
                <td>Something</td>
                <td>Size</td>
                <td>Date</td>
                <td>Name</td>
                <td>
                    <label class="checkbox checkbox-inline">
                        <input type="checkbox" name="file_premium_only" </label>
                </td>
                <td>
                    <label class="checkbox checkbox-inline">
                        <input type="checkbox">
                    </label>
                </td>
          </tr>
          <tr>
                <th scope="row">
                    <label class="checkbox checkbox-inline">
                        <input id="check" type="checkbox" name="file_id">
                    </label>
                </th>
                <td>Something</td>
                <td>Size</td>
                <td>Date</td>
                <td>Name</td>
                <td>
                    <label class="checkbox checkbox-inline">
                        <input type="checkbox" name="file_premium_only" </label>
                </td>
                <td>
                    <label class="checkbox checkbox-inline">
                        <input type="checkbox">
                    </label>
                </td>
          </tr>
    </table>
</div>
<!-- /.table-responsive -->

在这里你可以看到codepen的例子:

http://codepen.io/anon/pen/QjvomM

最佳答案

您可以使用ifToggled iCheck事件，并在其他行中使用check和uncheck方法进行相应的选中/取消选中操作。

引用:

https://github.com/fronteed/iCheck#callbacks

https://github.com/fronteed/iCheck#methods

旁注:我为全选检查设置了一个特定的类all，为每行检查了一个特定的类selector，避免使用多个id值。

代码:

jQuery(document).ready(function ($) {

    $('input').iCheck({
        checkboxClass: 'icheckbox_flat-pink',
        radioClass: 'iradio_flat-pink'
    });

    $('input.all').on('ifToggled', function (event) {
        var chkToggle;
        $(this).is(':checked') ? chkToggle = "check" : chkToggle = "uncheck";
        $('input.selector:not(.all)').iCheck(chkToggle);
    });

});

演示:http://jsfiddle.net/IrvinDominin/estL6xrv/

关于javascript - iCheck复选框全选，并刷新数据表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32994513/