1

我有一个表格，每行都有一个复选框。我为我的表格使用 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 中的图标。

4

1 回答 1

1

您可以检查是否#selectall单击了元素，如果是，则选中/取消选中所有其他检查。

代码：

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

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

});

记得添加到您的 CSS 中：

i {
    display: inline-block
}

<i>或者任何选择器都会在空标签元素上触发事件。

演示：http: //jsfiddle.net/IrvinDominin/zx4pq/

于 2013-09-28T19:32:03.470 回答