jQuery多个条件

我有4个复选框，每个都在单独的<div>。每个div都有相应的类（widthCol1 - > widthCol4）。每个div在<table>的单个<tr>中单独在<td>内。根据所选复选框的组合，我需要以特定颜色对表格的行进行着色。jQuery多个条件

考虑到只有前2个复选框，它应该在选中.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.是否还有一个更好，更清洁的方式来测试它们？

来源

2012-07-04 amb

你能为你的问题创建一个jsFiddle并给出一个链接。 – Vins

这是解决方案。下面的脚本（我的部分副本）将检索表中的每一行，然后将找到我需要的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-05 10:32:49 amb

这里是工作提琴玩弄：http://jsfiddle.net/Xt3RX/

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

来源

2012-07-04 18:13:57 mindandmedia

我已经更新了http://jsfiddle.net/Xt3RX/6/以更好地反映我的情况中的html。脚本在这方面无法正常工作。每当从第二列中选择一个复选框时，第一列中的所有其他复选框将考虑与该行无关。但它应该只关心自己行中的复选框。 – amb

http://jsfiddle.net/Xt3RX/8/ code var vals = $（“input [type ='checkbox']”）;是从所有的复选框中获取值？我怎样才能一次获得一行的值？ – amb

jQuery多个条件

回答

相关问题