<table  class="ui celled table small">
    <thead>
    <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Campaign</th>
        <th>Image</th>
        <th>URL</th>
        <th>Start-end date</th>
        <th>Sửa</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>69</td>
        <td>gia hoi sinh vien</td>
        <td>SINHVIEN_MAIN_BANNER</td>
        <td><img class="ui mini image centered" src="http://semantic-ui.com/images/wireframe/image.png"></td>
        <td>https://sinhvien.vientdonga.vn/</td>
        <td>13/10/2016 - 19/10/2016</td>
        <td>
            <div class="ui buttons mini">
                <button class="ui blue basic button"><i class="edit icon"></i> Sửa</button>
                <button class="ui red basic button"><i class="delete icon"></i> Xóa</button>
            </div>
        </td>
    </tr>
    <tr>
        <td>69</td>
        <td>gia hoi sinh vien</td>
        <td>SINHVIEN_MAIN_BANNER</td>
        <td><img class="ui mini image centered" src="http://semantic-ui.com/images/wireframe/image.png"></td>
        <td>https://sinhvien.vientdonga.vn/</td>
        <td>13/10/2016 - 19/10/2016</td>
        <td>
            <div class="ui buttons mini">
                <button class="ui blue basic button"><i class="edit icon"></i> Sửa</button>
                <button class="ui red basic button"><i class="delete icon"></i> Xóa</button>
            </div>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th colspan="10">
            <div class="ui right floated pagination menu tiny">
                <a class="icon item">
                    <i class="left chevron icon"></i>
                </a>
                <a class="item">1</a>
                <a class="item">2</a>
                <a class="item">3</a>
                <a class="item">4</a>
                <a class="icon item">
                    <i class="right chevron icon"></i>
                </a>
            </div>
        </th>
    </tr>
    </tfoot>
</table>
    

 <table  id="table1" class="ui celled table small">
    <thead>
    <tr>
        <th>
            <div class="ui fitted  checkbox">
                <input type="checkbox" class="group-checkable" data-set="#table1 .checkboxes" > <label></label>
            </div>
        </th>
        <th>ID</th>
        <th>Title</th>
        <th>Campaign</th>
        <th>Image</th>
        <th>URL</th>
        <th>Start-end date</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <div class="ui fitted  checkbox">
                <input type="checkbox" class="checkboxes"> <label></label>
            </div>
        </td>
        <td>69</td>
        <td>gia hoi sinh vien</td>
        <td>SINHVIEN_MAIN_BANNER</td>
        <td><img class="ui mini image centered" src="http://semantic-ui.com/images/wireframe/image.png"></td>
        <td>https://sinhvien.vientdonga.vn/</td>
        <td>13/10/2016 - 19/10/2016</td>

    </tr>
    <tr>
        <td>
            <div class="ui fitted  checkbox">
                <input type="checkbox" class="checkboxes"> <label></label>
            </div>
        </td>
        <td>69</td>
        <td>gia hoi sinh vien</td>
        <td>SINHVIEN_MAIN_BANNER</td>
        <td><img class="ui mini image centered" src="http://semantic-ui.com/images/wireframe/image.png"></td>
        <td>https://sinhvien.vientdonga.vn/</td>
        <td>13/10/2016 - 19/10/2016</td>

    </tr>

    </tbody>
    <tfoot>
    <tr>
        <th colspan="11">
            <div class="ui right floated pagination menu tiny">
                <a class="icon item">
                    <i class="left chevron icon"></i>
                </a>
                <a class="item">1</a>
                <a class="item">2</a>
                <a class="item">3</a>
                <a class="item">4</a>
                <a class="icon item">
                    <i class="right chevron icon"></i>
                </a>
            </div>
        </th>
    </tr>
    </tfoot>
</table>
    

var table1 = $("#table1");

table1.find('.group-checkable').change(function () {
    var set = jQuery(this).attr("data-set");
    var checked = jQuery(this).is(":checked");
    jQuery(set).each(function () {
        if (checked) {
            $(this).prop("checked", true);
            $(this).parents('tr').addClass("warning");
        } else {
            $(this).prop("checked", false);
            $(this).parents('tr').removeClass("warning");
        }
    });
});

table1.on('change', 'tbody tr .checkboxes', function () {
    $(this).parents('tr').toggleClass("warning");
});