Question

我有一个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);
        });
    });

如果我不尝试限制单个复选框的选择，那么一切都将与突出显示一起使用。但是添加它会导致行保持突出显示而不是切换。我究竟做错了什么？

Answer 1

只需存储被单击的复选框，删除表上所有选中的复选框和所有突出显示的内容，然后重新选中该复选框并添加突出显示内容即可。

这是一个小提琴https://jsfiddle.net/6nx2yz0q/

$("#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');
      });

jQuery选择复选框并突出显示单表行

1 个答案: