JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<label id="mainCheckboxContainer" class="hidden">
<input type="checkbox" value="-1" />
главный чекбокс
</label>
<label id="mainCheckboxContainer2" class="hidden">
<input type="checkbox" value="-1" />
главный2 чекбокс
</label>
<hr />
<label>
<input type="checkbox" class="myCheckbox" value="0" />
какой-то чекбокс #0
</label>
<label>
<input type="checkbox" class="myCheckbox" value="1" />
какой-то чекбокс #1
</label>
<label>
<input type="checkbox" class="myCheckbox2" value="2" />
какой-то чекбокс #2
</label>
</form>
CSS
.hidden { visibility: hidden; }
JavaScript
// реализация паттерна Обозреватель (Observer)
var topics = {};
function observer(id) {
var topic = id && topics[id];
if (! topic) {
var callbacks = $.Callbacks('memory');
topic = {
publish : callbacks.fire,
subscribe : callbacks.add,
unsubscribe : callbacks.remove
};
if (id) {
topics[id] = topic;
}
}
return topic;
};
// подписываемся на некую функцию
observer('checkboxes').subscribe(handleCheckboxesState);
var $mainCheckboxContainer;
// биндим всем чекбоксам при изменении их состояния вызывать у подписчиков функцию обработки
$(function() {
$('.myCheckbox:checkbox').on('change', function() {
observer('checkboxes').publish();
});
$mainCheckboxContainer = $('#mainCheckboxContainer');
})
// функция обработки
function handleCheckboxesState($checkbox) {
if ($('.myCheckbox:checkbox:checked').size()) {
$mainCheckboxContainer.removeClass('hidden');
} else {
$mainCheckboxContainer.addClass('hidden');
}
}
function handleCheckboxesState($checkbox) {
if ($('.myCheckbox:checkbox:checked').size()) {
$mainCheckboxContainer2.removeClass('hidden');
} else {
$mainCheckboxContainer2.addClass('hidden');
}
}