Atti Atti - 1 month ago 16
Javascript Question

How to stop multiple row highlighting

I have 3 Jquery function. That is first function which allows to choose only one checkbox

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


That is second function which allows to choose a checkbox by clicking a row.

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


That is third function which higlights the selected row.

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


Problem: I select a row then third function highlights it and when i select another row, it keeps on highlighting till i click the highlighted row. How can i fix that? Should i use another function instead of closest? Thanx.

Answer

It's a straight-forward change to make it perform the way you want...

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