JQuery - деление видимости через флажок

Question

У меня есть ряд соответствующих флажков и div на моей странице. Каждый флажок должен быть в состоянии показать / скрыть соответствующий div, когда он отмечен / не отмечен. Каждый div начинается с загрузки страницы. Я прочитал много веток по подобным вопросам здесь, но я не могу заставить ни один из примеров работать для моих требований.

Я настроил пример на JSFiddle: http://jsfiddle.net/shimmoril/wzMM4/11/. Я думал, что имея style = "display: none;" на div может быть беспорядок с JQuery, но когда я удалил его из первого div, тумблер все еще не работал.

Спасибо за вашу помощь.

Answer 1

Я видел две вещи не так с вашим jsfiddle. Во-первых, вы установили MooTools и пытаетесь протестировать jQuery. Во-вторых, вам нужно установить селектор для checkbox1 как идентификатор, а не как класс (т. Е. # Вместо.)

Измените вашу скрипку на jQuery, а затем используйте этот код скрипта:

$(document).ready(function() {
    $('#checkbox1').change(function() {
        $('#div1').toggle(!this.checked);
    });
});​

Answer 2

Глядя на ваш код, вы получаете:

<input type="checkbox" id="checkbox1" value="1" />

Тем не менее, ваш JQuery ищет класс:

 $('.checkbox1').change(function() {
    $('#div1').toggle(!this.checked);
});

Это должно быть: $ ('# checkbox1')

Answer 3

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

$(document).ready(function() {
    $('#checkbox1').change(function() {
        $('#div1').toggle(!this.checked);
    });
});​

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

$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        $(this).next().next().toggle(this.checked);
    });
});

Answer 4

Если все элементы div должны запускаться скрытно, а все флажки должны запускаться без проверки, то вы можете просто вызвать toggle () в событии изменения: http://jsfiddle.net/wzMM4/12/

Если это не таксначала нужно добавить код для синхронизации видимости div при загрузке страницы: http://jsfiddle.net/wzMM4/26/