Как задать стиль отдельностоящему блоку при клике на чекбокс, который находится в таблице?

Question

[display: block]

<div class="spoiler-table">
    <table>
        <tr>
            <td>Заголовок 1</td>
            <td>Заголовок 2</td>
            <td>Чекбокс</td>
        </tr>
        <tr>
            <td>Ячейка 1, строка 1</td>
            <td>Ячейка 2, строка 1</td>
            <td><input type="checkbox"/></td>
        </tr>
        <tr>
            <td>Ячейка 1, строка 2</td>
            <td>Ячейка 2, строка 2</td>
            <td><input type="checkbox"/></td>
        </tr>
    </table>
    <div class="spoil-table">Конец</div>
</div>

td{
    border: 1px solid;
}
.spoil-table {
    height: 0;
    opacity: 0;
    transition: 1s;
    overflow: hidden;
}

Как можно по активированному чекбоксу в таблице, задать новый стиль для блока .spoil-table?

opacity: 1;
height: 50px;
transition: 0.5s;

jsfiddle.net/asL0ckm7/1

UPD
jsfiddle.net/53cf4xuw
Появилась проблема в остающихся чекбоксах. Чекнул строку — спойлер открылся. Чекнул обе строки и после того как убираю одну галку в любой строке спойлер опять схлопывается. Как задать условие, что если хотя бы один input:checked, то не менять стиль спойлера на скрытый?

Answer 1

[AdNahim]

jquery:
к примеру

$(':checkbox').change(function(){
    var c = this.checked ? '#ff0000' : '#000';
    $('.spoil-table').css('color', c);
});

при checked цвет текста в .spoil-table красный.

Answer 2

[Mikhail Osher]

Насколько я знаю, такое только через JS делается.