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多個條件

回答

相關問題