iCheck checkbox select all , and refresh data table

Question

I'm using iCheck for checkbox style in bootstrap , but I'm having some issues I can't check/uncheck all ,, and dotn work refresh data table in time, need to refresh page , or page refreshed itslef.

and checkbox in premium or public , when I select it will stay checked and after i will reload page ,,

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

here u can see codepen example:

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

Answer 1

If I understand the question correctly you wish to give your page the functionality to check/uncheck a collection of iCheck checkboxes at the same time?

I achieved something similar to this with the following jQuery function..

function ToggleCheckboxes() {

    var flag = $('#togglebox').is(':checked')

    $("[name='PrintCheck']").each(function () {
        if (flag == true) {
            $(this).iCheck('check');                
        } else {
            $(this).iCheck('uncheck');                
        }
    });

}

This function was assigned to the onchange of the top checkbox. This would then find all of the checkboxes with the name 'PrintCheck' and either check or uncheck.

<input type="checkbox" id="togglebox" onchange="ToggleCheckboxes();">

Hope this helps!

Answer 2

You can use ifToggled iCheck event and if checked/unchecked act accordingly in the other rows using check and uncheck methods.

Ref:

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

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

Side note: I set a specific class all for the select all check and a specific class each row check selector, avoid mutiple id values.

Code:

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

});

Demo: http://jsfiddle.net/IrvinDominin/estL6xrv/