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中的图标。

Answer 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/

使用fontawesome作为表行的复选框

1 个答案: