Блог

У меня есть 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");
        }
    });
});
  

Проблема: я выбираю строку, затем третья функция выделяет ее, и когда я выбираю другую строку, она продолжает выделяться, пока я не щелкну выделенную строку. Как я могу это исправить? Должен ли я использовать другую функцию вместо closest? Спасибо.

Это простое изменение, позволяющее заставить его работать так, как вы хотите…

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

Обновите третий до чего-то подобного:

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

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

удалите highlight_row из остальных

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

Вам нужно удалить class для других trs. Вы можете использовать функцию siblings.

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