Как скрыть или показать блок в зависимости от состояний чекбоксов?

Question

[Владимир Бандуристов]

Имеется несколько чекбоксов. Для наглядности прикрепил картинку. Нужно что бы по клику на любой чекбокс, над таблицей возникала кнопка. А если чекбоксы не отмечены, скрывать эту кнопку.

Comments

[Владимир Бандуристов]

Забыл упомянуть что проверка должна происходить при клике на любой из чекбоксов.

Answer 1

[Илья Лесных]

Лучше будет сделать некий Listener, который подпишется на изменения состояния кнопок. А после публикации изменения - будет отображать или скрывать блок Это более универсально и разделяет котлеты от мух.

Вот пример реализации через jQuery Callbacks

// реализация паттерна Обозреватель (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);
// биндим всем чекбоксам при изменении их состояния вызывать у подписчиков функцию обработки
$(function() {
    $(':checkbox').on('change', function() {
        observer('checkboxes').publish($(this));
    });
})
// функция обработки
function handleCheckboxesState($checkbox) {
    // все чекбоксы - $(':checkbox').
    // кликнутый чекбокс - $checkbox
}

Демо

Comments

[Владимир Бандуристов]

Не отказался бы от примера:) Заранее спасибо:)

[Илья Лесных]

@vtboren отредактировал ответ выше.

[Владимир Бандуристов]

@Aliance Спасибо за ответ, решил это дело немного раньше вот таким смешным кодом))
$('чекбокс').on('click',function() {
var s = $('чекбоксs:checked').size();
if (s > 0) {
$('.блок').show('slow');
} else {
$('.блок').hide('slow');
}
});

[Илья Лесных]

это примерно то же самое в рамках простой логики, но если функционал разрастется - observer даст выигрыш.

[Илья Лесных]

что касается вашего кода - лучше использовать событие change для checkbox. лишняя переменная s не нужна. селектор блока не кешируется.

[Владимир Бандуристов]

@Aliance Спасибо огромное за помощь!

Answer 2

[Andrew Dabich]

По умолчанию блок должен быть скрыт.

$.each($('.checkbox'), function(index, val) {
		if ($(val).prop('checked')) {
			$('.block').show();
			return true;
		}
	});

За работоспособность не уверен, не проверил. Но суть такова.

Comments

[Евгений Петров]

Лучше заменить .prop('checked') => .is(':checked')
В общем-то выделение флажка или радиокнопки — больше состояние, чем наличие свойства. Да и в CSS считают так же.

ИМХО неудачное имя переменной, потому что $(val).val() поставит в тупик, если потребуется получать значение.