0

I have a 10 items listed on a page, with checkboxes next to each item. I'd like to create a tool that depicts the dependencies between each item.

Example: Item 1 is required for items 2, 3 and 4 to work. Item 3 is required for items 2, 4 and 5 to work. If I click the checkbox next to item 1 alone, I'd like to change the text color of items 1, 2, 3, and 4 from the default green to red (indicating that they don't work now because the prerequisite data item is checked). If I click the checkbox next to item 3 alone, I'd like to change the text color of items 2, 3, 4 and 5 to red but keep item 1 green.

Assume item 1 is already checked, and then I check item 3, I want items 1 through 4 to remain red and have item 5 go red as well. At this point if I was to uncheck item 1, only item 1 should go green as items 2,3,4 and 5 are also dependent on the checkbox for item 3. Alternatively, if I was to uncheck item 3, only item 5 should go green while the rest remain red.

I tried using the toggleClass function in JQuery but it did not give me the desired results. What's the best way to accomplish this with JQuery?

Attempted Toggle Code:

$('#item1').click(function(){
    var item = this.checked;
    $('#item1, #item2, #item3, #item4').toggleClass('green', !item).toggleClass('red', item);
});

$('#item3').click(function(){
    var item = this.checked;
    $('#item5, #item2, #item3, #item4').toggleClass('green', !item).toggleClass('red', item);
});

This code worked initially, but when one item was checked already and then another was checked, then removed, it did not display the correct results.

4

2 回答 2

0

您应该创建一些业务逻辑来跟踪复选框之间的依赖关系。从 UI 端，你应该使用这样的东西：

$('#myCheckbox').attr('checked', true);

并订阅它的事件

$('#myCheckbox').change(function () {
  //call your business logic to do update dependent checkboxes
});
于 2013-09-19T05:53:32.183 回答
0

我认为这可以解决您的问题：

HTML：

<input type="checkbox" id="item1" /><label for="item1" class="green">item1</label><br />
<input type="checkbox" id="item2" /><label for="item2" class="green">item2</label><br />
<input type="checkbox" id="item3" /><label for="item3" class="green">item3</label><br />
<input type="checkbox" id="item4" /><label for="item4" class="green">item4</label><br />
<input type="checkbox" id="item5" /><label for="item5" class="green">item5</label><br />

JavaScript：

// Define the checkboxes dependencies
var dependencies = {
    "#item1": ["#item1"],
    "#item2": ["#item1", "#item3"],
    "#item3": ["#item1", "#item3"],
    "#item4": ["#item1", "#item3"],
    "#item5": ["#item3"]
};

$(function() {
    // When any checkbox is clicked
    $("input:checkbox").change(function() {
        // Go through all dependencies
        $.each(dependencies, function(k, v) {
            var colour = "green";
            $.each(v, function(i, e) {
                // If any dependency is checked, then the current item needs to be red
                if ($(e + ":checked").length) {
                    colour = "red";
                }
            });

            // Get label corresponding to current item
            var label = $("label[for='" + $(k).attr("id") + "']");
            // And give it the correct class
            label.removeClass("green").removeClass("red").addClass(colour);
        });
    });
});

字典列出了所有项目，并为每个项目dependencies列出了它所依赖的项目。

例如，对于给定的定义，item2如果item1或被item3选中，则为item5红色，如果被选中，则为红色item3。

于 2013-09-19T06:59:35.320 回答