Question

本主题仅详细介绍了1个复选框 - 我的问题是如果没有勾选红色或白色的任何复选框，我需要突出显示表格行至少勾选一个。因此，如果没有勾选，则突出显示红色，但如果勾选至少一个，则突出显示白色。我有这段代码：

$("input:checkbox").live("change", function (event) {
    $("tr checkbox").each(function () {
        if ($(this).attr('checked')) {
            $(this).closest('tr').addClass('white');
        } else {
            $(this).closest('tr').removeClass('white');
        }
    });
});

html基本上只是一个包含两个数据和7个复选框的表格行 - 如果没有我们勾选则会突出显示红色但如果勾选至少1则突出显示白色。

提前致谢。

编辑：

我发现因为我从.live（）交换到.on（）并且动态加载了我的复选框。我必须将函数绑定到非动态元素，这是我最后使用的代码：

$("#emaillistbox").on("change","input:checkbox", function (event) {
var $tr = $(this).closest("tr");
if($tr.find("input:checked").length > 0)
{
    $tr.removeClass('red').addClass('white');
}else {
    $tr.removeClass('white').addClass('red');
}
});

emaillistbox是加载动态内容的div的名称。

Answer 1

我建议你这样做：

$("input[type='checkbox']").on("change", function (event) {
   $("tr input[type='checkbox']").each(function () {
       if ($("input[type='checkbox']:checked").length >= $("input[type='checkbox']").length) {
          $(this).closest('tr').addClass('white');
       } else {
          $(this).closest('tr').removeClass('white');
       }
    });
});

尝试检查:checked的长度，如果它等于复选框长度的长度，则将css类应用于父tr。

Answer 2

首先，您可以检查行中是否有未选中的框以删除each循环，其次，您应该使tr相对于单击的复选框，最后使用{{ 1}}代替on，因为它已被弃用。试试这个：

live

Example fiddle

Answer 3

您可以执行以下操作：

$("input:checkbox").on("change", function (event) {
    var $tr = $(this).closest("tr");
    if($tr.find("input:checked").length > 0)
    {
        $tr.removeClass('red').addClass('white');
    }else {
        $tr.removeClass('white').addClass('red');
    }
});

<强> See this working demo

<强>更新

要使其与动态内容一起使用，请使用事件委派：

$(document).on("input:checkbox", "change", function (event) { });

<强> Working demo

Answer 4

尝试使用标志变量来执行此操作。并且不推荐.live()使用 .on（）

$(document).on("change","input:checkbox", function (event) {
   var flag = true;
    $("tr checkbox").each(function () {
        if (!$(this).attr('checked')) 
           flag = false;

    });

    if(flag == true)
         $(this).closest('tr').addClass('white');
    else
          $(this).closest('tr').removeClass('white');

});

Answer 5

试试这个：

$("input[type=checkbox]").live("change", function (event) {
  if ($(this).closest('tr').find('input[type=checkbox]:checked').length > 0) {
    $(this).closest('tr').addClass('white');
  } else {
    $(this).closest('tr').removeClass('white');
  }
}

Answer 6

您应该使用一些布尔标志来控制状态

$("input:checkbox").on("change", function (event) {
    var some = false;
    var all = true;
    var none = true;
    $("tr checkbox").each(function () {
        if ($(this).attr('checked')) {
            some = true; 
            none = false;
        } else {
            all = false; 
        }
    });
    var row = $(this).closest('tr');
    row.removeClass('green').removeClass('red').removeClass('white')
    if (all)
      row.addClass('green')
    elseif (none)
      row.addClass('red')
    elseif (some)
      row.addClass('white')
});

希望这有帮助

如果选中所有复选框，更改行颜色？

6 个答案: