Зависимые флажки

Question

Зависимые флажки

0

У меня есть 10 элементов, перечисленных на странице, с флажками рядом с каждым элементом. Я хотел бы создать инструмент, который отображает зависимости между каждым элементом.

Пример: для позиций 2, 3 и 4 требуется элемент 1. Пункт 3 необходим для работы пунктов 2, 4 и 5. Если я установил флажок рядом с пунктом 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 должен зеленый, а остальные остаются красными.

Я попытался использовать функцию toggleClass в JQuery, но это не дало мне желаемых результатов. Какой лучший способ сделать это с помощью 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);
});

Сначала этот код работал, но когда один элемент был проверен уже, а затем был проверен другой, затем удалили, он не отобразил правильные результаты.

bork121 19 сен. 2013, в 07:43

Источник

Теги:

jquery

html

checkbox

2 ответа

0

Вы должны создать некоторую бизнес-логику, которая отслеживает зависимости между вашими ячейками. С стороны пользовательского интерфейса вы должны использовать что-то вроде этого:

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

и подписаться на его мероприятие

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

Shalom Aleichem 19 сен. 2013, в 03:17

Ещё вопросы

Thierry J. · Accepted Answer · 2013-09-19T04-01-00.000Z

Я думаю, что это решает вашу проблему:

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 будет красным, если item3 item1 или item3, item5 будет красным, если item3.