Question

我在页面上列出了10个项目，每个项目旁边都有复选框。我想创建一个描述每个项目之间依赖关系的工具。

示例： 第2,3和4项工作需要第1项。第2,4和5项工作需要第3项。如果单击项目1旁边的复选框，我想将项目1,2,3和4的文本颜色从默认绿色更改为红色（表示它们现在不起作用，因为必备数据项目检查）。如果单击项目3旁边的复选框，我想将项目2,3,4和5的文本颜色更改为红色，但将项目1保持为绿色。

假设已经检查了项目1，然后我检查项目3，我希望项目1到4保持红色并且项目5也变为红色。此时，如果我要取消选中第1项，则只有第1项应该变为绿色，因为项目2,3,4和5也取决于项目3的复选框。或者，如果我要取消选中第3项，则只有项目5应该绿色，其余保持红色。

我尝试在JQuery中使用toggleClass函数，但它没有给我想要的结果。使用JQuery实现这一目标的最佳方法是什么？

尝试切换代码：

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

此代码最初有效，但是当已经检查了一个项目然后检查了另一个项目，然后删除了它时，它没有显示正确的结果。

Answer 1

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

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

并订阅其活动

$('#myCheckbox').change(function () {
  //call your business logic to do update dependent checkboxes
});

Answer 2

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

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将为红色

相关的复选框

2 个答案: