Jquery使用复选框选择并高亮显示单个表行

我有一个asp.net核心mvc应用程序。在视图中，我有两张桌子。每个表都有一个用于选择行的复选框。我希望用户能够在每个表中选择一行并突出显示该行。以下是我的jquery代码：

这是我的剧本：

$(document).ready(function() {
        $("#table1 input:checkbox").click(function() {
            if ($(this).is(':checked')) {
                $(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color'));
                $(this).parents("tr:first").css('background-color', 'yellowgreen');
            } else {
                $(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor'));
            }
        });
        $("#table1 input:checkbox").change(function () {
            $("#table1 input:checkbox").not(this).prop('checked', false);
        });

        $("#table2 input:checkbox").click(function () {
            if ($(this).is(':checked')) {
                $(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color'));
                $(this).parents("tr:first").css('background-color', 'yellowgreen');
            } else {
                $(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor'));
            }
        });
        $("#table2 input:checkbox").change(function () {
            $("#table2 input:checkbox").not(this).prop('checked', false);
        });
    });

---

如果我不尝试限制单个复选框的选择，那么突出显示的一切都会非常好。但添加该选项会使行保持高亮显示，而不是切换。我做错了什么

只需存储单击的复选框，删除表中所有选中的复选框和所有突出显示，然后重新选中复选框并添加突出显示

这是一把小提琴

---

我还要补充一点，我尝试在.checked条件下的.click函数下执行此操作，但结果相同Hello！我试图实现这段代码，但我需要能够选择多个行，并为每一个选中的行高亮显示，也能够取消选择任何给定的行，它应该返回到正常的颜色。你能帮我做这个吗？

$("#table1 input:checkbox").click(function() {
        $("#table1 input:checkbox").prop('checked', false);
        $(this).prop('checked', true);
        $("#table1 tr").removeClass('bg-info');
        $(this).closest('tr').addClass('bg-info');
      });