Снимите все остальные флажки, кроме этого, и удалите классы CSS из них

Question

У меня есть строки таблицы с флажками, когда я щелкаю по строке, выбирает класс selected и флажок становится выбранным.

    $("#emp_grid tbody tr").click(function (e) {
    if (e.target.type == "checkbox") {

        // stop the bubbling to prevent firing the row's click event
        e.stopPropagation();
    } else {
        var $checkbox = $(this).find(':checkbox');
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $(this).filter(':has(:checkbox)').toggleClass('selected');              


    }
});

Как сделать все остальные флажки невыбранными и удалить «выбранный» класс из строк, кроме выбранного?

Answer 1

Используя ваш текущий скрипт, что-то вроде этого должно работать.

$("#emp_grid tbody tr").click(function(e) {
    $("#emp_grid tbody tr").removeClass("selected");
    $("#emp_grid :checkbox").not(e.target).removeAttr("checked");
    if (e.target.type == "checkbox") {

        // stop the bubbling to prevent firing the row's click event
        e.stopPropagation();
    } else {

        var $checkbox = $(this).find(':checkbox');
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $(this).filter(':has(:checkbox)').toggleClass('selected');
    }
});

Пример кода на jsfiddle

Не уверен в окончательной разметке, но, похоже, вы хотите, чтобы только один флажок был выбран? Если это так, может быть, список переключателей будет более подходящим вместо списка флажков?

Обновление
Чтобы разрешить переключение флажка при щелчке строки, вы можете попробовать что-то вроде этого:

$("#emp_grid tbody tr").click(function(e) {
    $("#emp_grid tbody tr").removeClass("selected");
    var $checkbox = $(this).find(':checkbox');
    $("#emp_grid :checkbox").not($checkbox).removeAttr("checked");
    if (e.target.type == "checkbox") {

        // stop the bubbling to prevent firing the row's click event
        e.stopPropagation();
    } else {
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $(this).filter(':has(:checkbox)').toggleClass('selected');
    }
});

Обновленная скрипка