Есть контейнер с двумя checkbox-ами bootstrap (по нажатию добавляется класс active):
<div class='btn-group'>
<label data-item="1" data-action="click" class="btn">
<input data-filter-name="фильтр 1" type="checkbox"> 1
</label>
<label data-item="1" data-action="click" class="btn">
<input data-filter-name="фильтр 1" type="checkbox"> 2
</label>
</div>
// по нажатию на checkbox
$('[data-action="click"]').click(function() {
//сохраняю этот элемент
var elem = $(this);
//Сохраняю ID характеристики
var itemID = $(this).data('item');
// сохраняю в переменную контейнер для блоков
var filterItemConteiner = $('.tags');
//проверяю активен ли checkbox
if ($(this).hasClass('active')) {
//если активен то удаляю блок в линии с таким id
$('.tags').find("[data-item='" + itemID + "']").remove();
} else { // если не активен то добавляю блок в линию
//сохраняю в переменную данные названия
var filterName = $(this).find('[data-filter-name]').data('filter-name');
// ищу в специфификации фильтра такой же элемент исключая нажатый и нажимаю на него
$('.btn-group').find("[data-item='" + itemID + "']").not(elem).click();
// добавляю в контейнер блок с названием из переменной filterName и ID характеристики
filterItemConteiner.append('<div data-item="'+itemID+'" class="tags-item">'+filterName+'</div>');
};
});
Действия:
По нажатии на checkbox, если он не активен в блоке .tags создается блок с таким же значением data-item как и у нажатой кнопки.
В контейнере может быть несколько checkbox с одинаковым data-item.
Использую такую конструкцию:
$('.btn-group').find("[data-item='" + itemID + "']").not(elem).click();
(Ищу в контейнере data-item с таким же значением, исключая нажатый, и нажимаю на найденный) создается рекурсия - найденная кнопка так же ищет другую кнопку (только что нажатую) и они ссылаются друг на друга.
Как связать события двух разных объектов?
ссылка примера:
https://codepen.io/maksimlavrenyuk/pen/zMyBWY