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

问题描述：

这个主题已被详细介绍了只有一个tickbox - 我的问题是我需要突出显示表格行，如果没有勾选红色或白色的颜色是至少有一个打勾。因此，如果没有勾选，则突出显示红色，但如果至少勾选了一个，则突出显示白色。我有这样的代码：如果所有复选框都选中，更改行颜色？

$("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个tickboxes - 如果没有我们的勾选，然后突出显示红色，但如果至少1被选中，然后突出显示为白色。

在此先感谢。

编辑：

我发现，因为我是从.live交换（）来。对（）和我tickboxes正在动态加载。我只好功能结合到一个非动态元素。这是我最终使用的代码：

$("#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名称。

幽州你想添加的，如果所有的类打勾编辑，如果只有1被勾选。你能否准确地澄清这些案件中的哪一个是正确的。 –

答

你可以做这样的事情：

$("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

这很好，我将如何使它适用于动态内容？即如果那些勾选框是通过ajax加载的？ –

@ ch3my看到更新后的安卓 – letiagoalves

感谢您的帮助，我通过将函数绑定到最终的非动态div来解决问题，但我也看到了您的方法。 –

答

尝试使用标志变量做this.and .live()被deprecated.try使用。对（）

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

});

如果只检查最后一个复选框，则标记将为true，并将其初始化为true，然后仅在未选中某个复选框时进行控制。 – jbrtrnd

@JBRTRND谢谢我更新我的代码 – PSR

谢谢 - 如果我使用.on（），它是相同的功能吗？除了将.live（）更改为.on（）课程之外。 –

答

试试这个：

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

虽然它被OP使用，但实时功能已被弃用 –

@Bartdude：这个解决方案肯定适用于ch3my 。使用'on'并不需要，因为它不是很久以前推出的。 – LukLed

注意，如果选中1复选框，则OP会在该类中添加，如果选中所有复选框，则OP希望它发生。 –

答

我建议你做这样：

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

试着检查的长度如果该值等于复选框长度的长度，则仅将css类应用于父项tr。

答

首先你可以检查，看看是否有行中的任意选中复选框，删除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'); 
    } 
});

Example fiddle

也许可以使用'：not（）'函数来替代选中复选框的比较数和复选框的总数。只要检查复选框未检查的长度是否大于0. – jbrtrnd

@JBRTRND好点，这是一个更优雅的方法，修改 - 谢谢。 –

@RoryMcCrossan。on（）不工作我认为是因为我的ajax调用 - 这是在tickbox窗体中加载的东西。我究竟做错了什么？ jquery函数在同一页面上工作，但不在同一页面上的任何内容上工作。 –

答

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

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

希望这有助于

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

相关推荐