Wie überprüft man alle Checkboxen in der aktuellen Form mit jquery?

Question

Betrachten Sie diesen einfachen Beispiel-Code:

<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> 

Alles, was ich zu bekommen habe versucht Wählen Sie in jeder Form zu arbeiten (Formulare sind in meinem Produktionscode dynamisch generiert und haben unterschiedliche, unterschiedliche Namen)

Ich benutze diese jquery aber Select_all funktioniert nur für die erste Form; Es hat keine Auswirkungen auf Formulare unter dem ersten.

Ich kann nicht herausfinden, wie alle Checkboxen in jedem Kontrollkästchen in der Form ID Check.

Kann mir jemand in die richtige Richtung zeigen?

Vielen Dank

Answer 1

Sie haben mehrere Elemente mit der gleichen ID, die ungültige HTML und ist das Problem verursacht Sie sehen. Ändern Sie id="select_all" zu class="select_all" und $('#select_all') zu $('.select_all'), und Sie sollten gut sein.

Answer 2

IDs sind eindeutig. Du hast zwei. Wenn Sie mehrere Elemente haben möchten, verwenden Sie class="select_all" und $('.select_all')

Answer 3

Sie haben zwei Elemente mit der ID select_all; das ist nicht erlaubt. Ändern Sie diesen auf eine Klasse und versuchen Sie dies:

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

Answer 4

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

Allerdings müssen Sie nur ein Element mit id select_all für diese arbeiten. Wenn Sie zu einer Klasse von select_all ändern können, dann ersetzen Sie einfach den # mit einem . und du bist gut zu gehen

Answer 5

Try this:

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

Answer 6

Sie nicht zwei Elemente mit der gleichen ID haben. example

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; 
     }); 

    }); 

});