используя тот же код для определенных блоков флажков

Question

У меня есть 7 различных блоков флажков в форме, с примерно 8 флажками в каждом блоке.

Я бы хотел, чтобы пользователь мог отмечать поле в верхней части каждого блока, которое затем будет отмечать (и снимать флажок) блок под ним.

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

    <script type="text/javascript">
    $(document).ready(function()
    {
        $("#checkall").click(function()             
        {
            var checked_status = this.checked;
            county = $(this).val();
            countyfind = $("input").find('.' + county);
            countyfind.each(function()
            {
                this.checked = checked_status;
            });
        });                 
    });

    </script>   

Вот флажок в верхней части блока:

<input type="checkbox" id="checkall" name="east_anglia" value="east_anglia"> &nbsp;<h4 class="postcoderegion">East Anglia</h4>

... что отметит следующее:

 <input type="checkbox" id="served_areas0" name="served_areas0" class="east_anglia" value="AL" style="vertical-align:middle;" />

Любая помощь / руководство было бы очень полезно! Благодаря.

Answer 1

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

countyfind = $("input").find('.' + county);

на эту:

countyfind = $("input." + county);

.find() ищет child элементов, соответствующих селектору, но элемент ввода Сам имеет нужный класс, а не дочерний элемент ввода.

Answer 2

Ваш код будет работать - как только вы измените #checkall на .checkall и ваши id="checkall" флажки на class="checkall".

Проблема заключается в том, что идентификатор должен быть уникальным в документе - и еслив текущем документе более одного идентификатора с одинаковым значением, результат - неопределенный.И поскольку jQuery использует document.getElementById для идентификаторов, он фактически ничего не находит для вашего первого запроса DOM - что означает, что событие щелчка не регистрируется.

Кроме того, вам нужно найти входные данные с соответствующим классом,а не элементы, которые имеют соответствующий класс и , являются дочерними элементами входных данных.Измените countyfind = $("input").find('.' + county); на countyfind = $("input." + county); (см. Ответ @ nocache).

Однако есть еще лучший способ сделать что-то.Вместо создания n прослушивателей событий (где n - количество имеющихся у вас .checkall ящиков) создайте отдельный delegate (либо body, либо содержащий элемент) для прослушиваниядля кликов и реагировать на соответствующие клики.

Таким образом, вместо:

$("#checkall").click(function() {
    // Do things here
});

Попробуйте:

$("body_or_selector").delegate(".checkall", "click", function(event) {
    // Do things here
});

Затем, когда у вас есть событие, вы можете работатьс помощью event.target, чтобы найти флажки под ним и отметить их.

var $target = $(event.target);
var checked_status = $target.prop("checked");
$target.closest("container_for_you_checkboxes").
        find(":checkbox").
        prop("checked", checked_status);

См .: JsFiddle