0

4つのチェックボックスがあり、それぞれが別々になってい<div>ます。各divには、対応するクラスがあります（widthCol1-> widthCol4）。<td>各divは、の1つ<tr>の個別の内部にあり<table>ます。選択したチェックボックスの組み合わせに応じて、テーブルの行を特定の色で着色する必要があります。

最初の2つのチェックボックスのみを考慮すると、チェックされている場合は行#ffaaaaに色を付け、チェックされてい.widthCol2 inputない場合は＃ccff99に色を付ける必要があります。また、チェックボックスが選択されていない（実装されていない）場合は、行#fffに色を付ける必要があります。

他の行で2番目のチェックボックスが選択されている場合、スクリプトは機能しません。なんで ？

$(".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=白、1 =緑、2 =赤、3 =紫（またはそうでないもの）のように単純で、カウンターはすべてのチェックされたボックスをカウントするだけです。

于 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 に答える