флажки jquery только внутри элемента

Question

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

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

Вы можете увидеть больше моего кода здесь: http://jsfiddle.net/CVnTy/

У меня есть этот пример HTML:

<div class='audience-group'>
    <input type='checkbox' class='audience-group-checkbox' value='9' />
    <div class='audience-group-name'>
        JGG Enterprises
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='7' />
        <div class='audience-name'>
            Mucho, George
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='9' />
        <div class='audience-name'>
            Bo, Jen
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='10' />
        <div class='audience-name'>
            Gin, Junto
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='12' />
        <div class='audience-name'>
            Molina, Greg
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='36' />
        <div class='audience-name'>
            Berkely, Dada
        </div>
    </div>
</div>
</div>
<div>
    <div class='audience-group'>
        <input type='checkbox' class='audience-group-checkbox' value='8' />
        <div class='audience-group-name'>
            GBA Inc.
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='1' />
            <div class='audience-name'>
                Kapate, Jones
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='2' />
            <div class='audience-name'>
                Bingo, Gringo
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='4' />
            <div class='audience-name'>
                Doe, John
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='8' />
            <div class='audience-name'>
                Merio, Horhe
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='35' />
            <div class='audience-name'>
                Dalisay, JM
            </div>
        </div>
    </div>
</div>

и мой код jquery:

$('.audience-group-name').click(function() {
    if ($(this).nextUntil('.audience-group').length) {
        $(this).nextUntil('.audience-group').toggle();
    } else {
        alert('No audience under this group.');
    }
});

$('.audience-group-checkbox').each(function() {
    $(this).click(function() {
        $('.audience-checkbox').attr('checked', $(this).is(':checked'));
    });
});

Я новичок в jquery, спасибо за любую помощь! :)

Answer 1

Вместо цикла each, который вы используете в данный момент, вы можете использовать что-то вроде этого:

$('.audience-group-checkbox').click(function() {
    $(this).closest(".audience-group").find(".audience-checkbox").prop("checked", this.checked); 
});

Получает элемент .audience-group предка (closest* 1008).* - parent также будет работать здесь, если ваш HTML всегда будет таким, как показано в вопросе), тогда получит все элементы-потомки с классом "аудитория-флажок" (find).Обратите внимание, что я также использовал prop вместо attr, поскольку checked является свойством DOM.Я также использовал this.checked вместо того, чтобы обернуть this в другой объект jQuery, просто потому, что доступ к свойству самого элемента DOM короче и быстрее.

Вот обновленная скрипка .

Обратите внимание, что вам не нужно each.Большинство методов jQuery применяются ко всем элементам в соответствующем наборе, и click (и все методы-обработчики событий в этом отношении) не являются исключением.

Answer 2

Ну, у вас уже был код для расширения / свертывания.Все, что вам нужно, это немного увеличить его , вот так .Я также позволил себе немного упростить ваш код.

Answer 3

В этом коде:

$('.audience-group-checkbox').each(function() {
    $(this).click(function() {
        $('.audience-checkbox').attr('checked', $(this).is(':checked'));
    });
});

$('.audience-checkbox') повторно выберет все элементы, имеющие класс audience-checkbox.

То, что вы, вероятно, хотите сделать, это только изменить атрибут для элемента, который был нажат, правильно?

Это было бы ...

$('.audience-group-checkbox').each(function() {
    $(this).click(function() {
        $(this).attr('checked', $(this).is(':checked'));
    });
});

Кстати, когда вы делаете такие вещи, имейте в виду, что некоторые браузеры будут делать это по умолчанию, так что в итоге вы столкнетесь с ситуацией, когда некоторые браузеры будут работать так, как вы ожидаете, а другие будут проверять коробка дважды (первый раз, меняя это и 2-й том, изменяющий это назад). Я обнаружил, что если у вас нет действительно веских причин для этого, просто дайте браузеру обрабатывать проверку и снятие отметки.

Можно запретить браузеру по умолчанию что-то вроде ...

.click(function (e) { e.preventDefault(); })

Answer 4

вам не нужно использовать каждый для назначения вашего события клика.Если вы просто замените это на:

$('.audience-checkbox').click(function(){
   $(this).attr('checked', true);
})

Answer 5

//add event handler to all '.audience-group-checkbox' elements
$('.audience-group-checkbox').click(function() {

    //cache this element
    var $this = $(this);

    //select the parent of this object and then find all the '.audience-checkbox' elements under it
    $this.parent().find('.audience-checkbox').prop('checked', $this.is(':checked'));
});

Вот jsfiddle: http://jsfiddle.net/k57Tp/

Answer 6

$('.audience-group-checkbox').click(function() {
    $(this).find('.audience-checkbox').prop('checked', $(this).is(':checked'));
})