jquery - 表の行のチェックボックスとして fontawesome を使用する

Question

各行にチェックボックスがあるテーブルがあります。テーブルに Bootstrap 3 を使用し、チェック ボックスに Font Awesome アイコンを使用しています。

<table class="table table-hover">
    <thead>
        <tr>
            <th><i type="checkbox" class="icon-check-empty" id="selectall"></i></th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><i type="checkbox" class="icon-check-empty option"></i></td>
            <td><a href="#">Anna</a></td>
            <td>15</td>
        </tr>
        <tr>
            <td><i type="checkbox" class="icon-check-empty option"></i></td>
            <td><a href="#">John</a></td>
            <td>18</td>
        </tr>
    </tbody>
</table>

これは、Font Awesome アイコンをチェックボックスとして使用できるようにするコードです。

$('i').click(function(){
        if($(this).hasClass('icon-check')) {
            $(this).removeClass('icon-check').addClass('icon-check-empty');
        } else {
            $(this).removeClass('icon-check-empty').addClass('icon-check');
        }
});

このコードは、すべてのチェックボックスを選択できるようにするためのものです。

$(function () {
    $("#selectall").click(function () {
        $('[class*="option"]').prop("checked", this.checked);
    });
    $('[class*="option"]').click(function () {
        if ($('[class*="option"]').length == $('[class*="option"]:checked').length) {
            $("#selectall").prop("checked", true);
        } else {
            $("#selectall").prop("checked", false);
        }
    });
});

カスタムチェックボックスを使用していない場合、これはうまく機能します。しかし、Font Awesome のアイコンを使用したいのです。