0

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

仅考虑前 2 个复选框，它应该在选中时为 #ffaaaa 行着色，在.widthCol2 input未选中时为 #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。是否还有更好、更清洁的方法来测试它们？

4

2 回答 2

0

这是一个可以玩的小提琴：http: //jsfiddle.net/Xt3RX/

我建议您尝试形式化您的逻辑，以便您可以通过检查查找正确的颜色。也许它就像 0=white, 1=green, 2=red, 3=purple（或其他）一样简单，计数器只计算所有选中的框。

于 2012-07-04T18:13:57.913 回答
0

这就是解决方案。下面的脚本（我的部分副本）将检索表中的每一行，然后找到我需要的 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);
    });
});
于 2012-07-05T10:32:49.183 回答