У меня есть 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);
});
Сначала этот код работал, но когда один элемент был проверен уже, а затем был проверен другой, затем удалили, он не отобразил правильные результаты.
Я думаю, что это решает вашу проблему:
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
.
Вы должны создать некоторую бизнес-логику, которая отслеживает зависимости между вашими ячейками. С стороны пользовательского интерфейса вы должны использовать что-то вроде этого:
$('#myCheckbox').attr('checked', true);
и подписаться на его мероприятие
$('#myCheckbox').change(function () {
//call your business logic to do update dependent checkboxes
});