Question

我有一个带有复选框的表格行，当我点击该行时，该类将被选中，并且复选框将被选中。

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

Code example on 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');
    }
});

<强> Updated fiddle

取消选中除此之外的所有其他复选框，并从中删除css类

1 个答案: