0

该主题仅针对 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 的名称。

4

6 回答 6

2

我建议你这样做：

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

尝试检查:checkedif 的长度等于复选框长度的长度，然后将 css 类应用于父级tr。

于 2013-06-12T10:08:59.797 回答
2

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

$("input:checkbox").on('change', function (event) {
    var $tr = $(this).closest('tr');
    if ($(':checkbox', $tr).not(':checked').length) {
        // not all checked
        $tr.removeClass('white');
    }
    else {
        // all checked in row
        $tr.addClass('white');
    }
});

示例小提琴

于 2013-06-12T10:10:12.947 回答
2

你可以这样做：

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

看到这个工作演示

更新

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

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

工作演示

于 2013-06-12T10:13:27.417 回答
1

尝试使用标志变量来执行此操作。.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');

});
于 2013-06-12T10:05:01.207 回答
1

试试这个：

$("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');
  }
}
于 2013-06-12T10:08:55.780 回答
1

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

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

希望这可以帮助

于 2013-06-12T10:10:46.090 回答