前言

以往寫這種功能似乎都要寫好幾行，儘管有了 jQuery 加持，也是會把事件都綁定到主控的 checkbox 再做處理，結構上略顯混亂及累贅，所以這次來挑戰看看是不是有比較直覺、結構清楚又兼顧效能的寫法。

jsFiddle Online Test

HTML

<table border="1">
    <thead>
        <tr>
            <th scope="col"><input type="checkbox" /></th>
            <th scope="col">Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>            
            <th scope="row"><input type="checkbox" /></th>
            <td>Row 0</td>
        </tr>
    </tbody>
</table>

//產生 rows
var html = [], j=0;
for (var i=1; i<500; i++) {
    html[j++] = '';
    html[j++] = '';
    html[j++] = 'Row ' + i + '';
    html[j++] = '';
}
$('table tbody').append(html.join(''));

$('table')
    //使用 delegate 綁定 click 事件至 thead 內的 checkbox
    .delegate('thead :checkbox', 'click', function (e) {
        $(e.liveFired) //取得 parent
            .find('tbody :checkbox') //取得 tbody.checkbox
            .prop('checked', $(this).prop('checked'))
            .change();
})
    //使用 delegate 綁定 change 事件至 tbody 內的所有 checkbox
    .delegate('tbody :checkbox', 'change', function (e) {
        var box = $(this); //cache object
        box
            .parents('tr') //取得 parent.tr
            .css('background', box.prop('checked') ? '#eee' : 'transparent');
    });