ICheck checkbox select all and update data table

I use iCheck for the checkbox style in bootstrap, but I have some problems that I can not check / delete everything, and dotn work to update the data table in time, refresh the page or refresh the page.

and the checkbox in the premium class or public, when I select it, it will remain on after the page is reloaded

<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 you can see an example of codepen:

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

+4
source share
2 answers

You can use the ifTogglediCheck event , and if the checkbox / checkbox is checked on other lines using the checkand methods uncheck.

Ref:

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

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

: all selector, .

:

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/

+3

, / iCheck?

- jQuery.

function ToggleCheckboxes() {

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

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

}

onchange . "PrintCheck" , .

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

, !

+2

Source: https://habr.com/ru/post/1610592/


All Articles