Как проверить все флажки в текущей форме с помощью jquery?

Question

Рассмотрим этот простой пример кода:

<form name="text" id="frm1" method="post">
  <input type="checkbox" name="name[]" value="1000"> Chk1<br>
  <input type="checkbox" name="name[]" value="1001"> Chk2<br>
  <input type="checkbox" name="name[]" value="1002"> Chk3<br>
  <input type="checkbox" name="name[]" value="1003"> Chk4<br>
  <input type="checkbox" id="select_all"/> Select All<br>  
</form>

<form name="text" id="frm2" method="post">
  <input type="checkbox" name="name[]" value="4000"> Chk1<br>
  <input type="checkbox" name="name[]" value="4001"> Chk2<br>
  <input type="checkbox" name="name[]" value="4002"> Chk3<br>
  <input type="checkbox" name="name[]" value="4003"> Chk4<br>
  <input type="checkbox" id="select_all"/> Select All<br>  

Я пытаюсь заставить Select All работать в каждой форме (формы динамически генерируются в моем рабочем коде и имеют разные,разные имена)

Я использую этот jquery, но select_all работает только для первой формы;это не влияет на формы ниже первой.

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  if($(this).is(':checked')) {
      checkboxes.attr('checked', 'checked');
  } else {
      checkboxes.removeAttr('checked');
  }
});

Я не могу понять, как проверить все флажки в любом: флажок, содержащийся в идентификаторе формы.

Может кто-то указать мнев правильном направлении?

Большое спасибо

Answer 1

У вас есть несколько элементов с одинаковым идентификатором, который является недействительным HTML и вызывает проблему, которую вы видите. Измените id="select_all" на class="select_all" и $('#select_all') на $('.select_all'), и все будет хорошо.

Answer 2

У вас есть два элемента с идентификатором select_all; это не разрешено Измените это на класс и попробуйте это:

$('.select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.attr('checked', $(this).is(':checked'));
});

Answer 3

Вы не можете иметь два элемента с одинаковым идентификатором. пример

HTML:

<form name="text" id="frm1" method="post">
  <input type="checkbox" name="name[]" value="1000"> Chk1<br>
  <input type="checkbox" name="name[]" value="1001"> Chk2<br>
  <input type="checkbox" name="name[]" value="1002"> Chk3<br>
  <input type="checkbox" name="name[]" value="1003"> Chk4<br>
  <input type="checkbox" id="select_all_1"/> Select All<br>  
</form>

<form name="text" id="frm2" method="post">
  <input type="checkbox" name="name[]" value="4000"> Chk1<br>
  <input type="checkbox" name="name[]" value="4001"> Chk2<br>
  <input type="checkbox" name="name[]" value="4002"> Chk3<br>
  <input type="checkbox" name="name[]" value="4003"> Chk4<br>
  <input type="checkbox" id="select_all_2"/> Select All<br>  
</form>

JS:

$(function() {

    $('#select_all_1, #select_all_2').bind('click', function(event) {

        var 
            ref = this,
            refChecked = this.checked;

        $(this.form).find('input[type="checkbox"]').each(function(i, el) {
            if(this != ref)
              this.checked = refChecked;
        });

    });

});

Answer 4

Попробуйте это:

$("#select_all").click(function()               
        {
            var checked_status = this.checked;
            $("input[@name=name]").each(function()
            {
                this.checked = checked_status;
            });
        });

Answer 5

$('#select_all').click(function() {
    $("input:checkbox", $(this).closest('form')).attr("checked", this.checked)
});

Однако для этого вам понадобится только один элемент с идентификатором select_all. Если вы можете перейти на класс select_all, тогда просто замените # на ., и вы готовы пойти

Answer 6

идентификаторы являются уникальными.У вас есть два.Если вам нужно несколько элементов, используйте class="select_all" и $('.select_all')