Question

我有3个Jquery功能。这是第一个允许只选择一个复选框的功能

$('input[type="checkbox"]').on('change', function () {
    $('input[type="checkbox"]').not(this).prop('checked', false);
});

这是第二个允许通过单击行选择复选框的功能。

$(document).ready(function () {
    $('.boekTable tr').click(function (event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    });

这是第三个强调所选行的功能。

$("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("highlight_row");
        } else {
            $(this).closest('tr').removeClass("highlight_row");
        }
    });
});

问题：我选择一行然后第三个功能突出显示它，当我选择另一行时，它会一直突出显示直到我点击突出显示的行。我该如何解决这个问题？我应该使用其他功能而不是最接近吗？感谢名单。

Answer 1

将第三个更新为类似的内容：

$("input[type='checkbox']").change(function (e) {
    $(this).closest('table').find('tr').removeClass('highlight_row');

    if ($(this).is(":checked")) {
        $(this).closest('tr').addClass("highlight_row");
    }
});

Answer 2

这是一个直截了当的改变，让它以你想要的方式表现......

$("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) {
            // this will remove all highlights before adding a new one
            $(this).closest('table').find('tr').removeClass("highlight_row");
            $(this).closest('tr').addClass("highlight_row");
        } else {
            $(this).closest('tr').removeClass("highlight_row");
        }
    });
});

Answer 3

从其余

中删除highlight_row

$("input[type='checkbox']").change(function (e) {
        $('tr').removeClass("highlight_row");
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("highlight_row");
        }
    });
});

Answer 4

您需要删除其他课程的课程。你可以使用兄弟姐妹的功能。

$("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("highlight_row");
            $(this).closest('tr').siblings().removeClass("highlight_row");
        } else {
            $(this).closest('tr').removeClass("highlight_row");
        }
    });
});

如何停止多行突出显示

4 个答案: