Question

I have 4 checkboxes, each in a separate <div>. Each div has a corresponding class (widthCol1 -> widthCol4).
Each div is inside a separate <td> in a single <tr> of a <table>.
Depending on what combination of checkboxes are selected, I need to color the row of the table in a specific color.

Considering only the first 2 checkboxes it should color the row #ffaaaa when .widthCol2 input is checked and #ccff99 when it is not. Also it should color the row #fff if there is no checkbox selected (not implemented).

The script doesn’t work if there is a second checkbox selected in other row. Why ?

$(".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
    }
});

This script will have to be used for all 4. Is there also a better, cleaner way to test them ?

Answer 1

This is the solution.
The script below (partial copy of mine) will retrieve every row in the table and then, will find the 3 checkboxes that I need. After that it will test them and assign to color the correct color code. In the end it will assign the color to the row. In this way I only need to concern myself with 3 variables and not all the checkboxes (with their specific index) that are in the table.

$("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);
    });
});