Question

我有4个复选框，每个复选框都在一个单独的<div>中。每个div都有一个对应的类（widthCol1 - ＆gt; widthCol4）。每个div位于<td>的单个<tr>中的单独<table>内。根据选中的复选框组合，我需要以特定颜色为表格的行着色。

只考虑前两个复选框，它应该在检查.widthCol2 input时为#ffaaaa行着色，而在不检查时为＃ccff99。如果没有选中复选框（未实现），它也应该为#fff行着色。

如果在其他行中选择了第二个复选框，则脚本不起作用。为什么？

$(".widthCol1 input").click(function () {
    if ($(this).is(":checked")) {
        if ($(".widthCol2 input").is(":checked")) {
            $(this).closest("tr").css("background-color", "#ffaaaa");
        } else {
            $(this).closest("tr").css("background-color", "#ccff99");
        }
    } else {
        // test other checkboxes before coloring #fff
    }
});

这个脚本必须用于所有4.还有更好，更清洁的方法来测试它们吗？

Answer 1

这是一个可以解决的问题：http://jsfiddle.net/Xt3RX/

我建议你尝试将你的逻辑形式化，这样你就可以通过检查来查找正确的颜色。也许它很简单，0 =白色，1 =绿色，2 =红色，3 =紫色（或不是），其中计数器只计算所有复选框。

Answer 2

这是解决方案。下面的脚本（我的部分副本）将检索表中的每一行，然后，将找到我需要的3个复选框。之后，它将测试它们并为正确的颜色代码指定颜色。最后它会将颜色分配给行。通过这种方式，我只需要关注3个变量，而不是关注表中的所有复选框（及其特定索引）。

$("input[type=checkbox]").click(function () {
    var vals = $(this).closest("tr");
    vals.each(function () {
        var color = "#fff";
        var c1 = $(this).find(".widthCol1 input:checkbox");
        var c2 = $(this).find(".widthCol2 input:checkbox");
        var c3 = $(this).find(".widthCol3 input:checkbox");
        if ($(c2).is(":checked")) {
            color = "#ffaaaa";
        } else {
            $(c1).is(":checked") ? color = "#ccff99" : color = "#fff";
        }
        $(this).css("background-color", color);
    });
});

jquery多个条件

2 个答案: