2016-05-30 26 views
0

Ich habe ein kleines Problem und ich konnte immer noch keine Lösung finden. Es handelt sich um einen Tisch in meiner Sicht und jede Tabellenzeile hat sein eigenes Kontrollkästchen. Es gibt ein weiteres Haupt-Kontrollkästchen, das alle anderen Kontrollkästchen aktivieren sollte, wenn ich es auswähle.Jquery-Code, wenn das Kontrollkästchen aktiviert ist, wählen Sie alle anderen Kontrollkästchen - Arbeiten mit Laravel

Mein Problem ist, dass es nicht funktioniert, wie ich es will.

Ausblick:

// thats the main checkbox, that should select all other checkboxes 

<th><input type="checkbox" class="select-all"/>All</th> 
// and some other non important <th> fields 


all table rows 

       @foreach($products as $product) 
        <tr> 
         <td> 
          // every line checkbox 
          <input type="checkbox" name="id[]" value="{{$product->id}}"> 
         </td> 
         <td>{{ $product->name }}</td> 
         <td>{{ $product->tld }}</td> 
         <td> 
          @foreach($product->tags as $tag) 
           {{$tag->name}}, 
          @endforeach 
         </td> 
         <td>{{ $product->created_at->format('d.m.y') }}</td> 
        </tr> 
       @endforeach 

JQuery

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.select-all').on('click', function() { 
      if(this.checked) { 
       $('.select-all').each(function() { 
        this.checked = true; 
       }); 
      } 
      else { 
       $('.select-all').each(function() { 
        this.checked = false; 
       }); 
      } 
     }); 
    }); 
</script> 

Der JQuery-Skript ist in Ordnung, wenn ich die "select-all" Klasse meines <input> Tag INSIDE meine foreach-Schleife und auch bei der hinzufügen Feld außerhalb der Schleife, alle Kontrollkästchen werden ausgewählt. Wenn ich die Klasse aus dem Feld innerhalb meiner foreach-Schleife entferne, funktioniert es nicht mehr. Mein Problem ist jetzt, dass ich nur alle Kästchen mit meinem Haupt-Kontrollkästchen auswählen möchte. Derzeit ist es egal, welches Kontrollkästchen ich auswähle, jedes Kontrollkästchen wird ausgewählt. (So ​​muß ich nicht die Möglichkeit, eine einzelne Zeile oder zwei zu wählen.

die select-all-Klasse ist nur in meinem Haupt-Checkbox Eingabefeld, nicht in meinem Eingabefeld innerhalb meiner foreach-Schleife.

vielen dank für Ihre Zeit und sorry für mein schlechtes Englisch

Antwort

1

Es ist wie Ihr jQuery-Selektor sieht für das Unterkontrollkästchen Kommissionierung ist leicht ab. Versuchen:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.select-all').on('click', function() { 
      var checkAll = this.checked; 
      $('input[type=checkbox]').each(function() { 
       this.checked = checkAll; 
      }); 
     }); 
    }); 
</script> 
+0

das funktioniert einfach perfekt! ! Vielen Dank, ich lerne immer noch jquery :) – WellNo

+1

Gern geschehen :)! Obwohl es erwähnenswert ist, wählt der "Eingabe [type = checkbox]" - Selektor alle Checkboxen auf der Seite aus (einschließlich der Option Alle auswählen). Wenn Sie später weitere hinzufügen (also mit der Tabelle ausgleichen), werden sie ebenfalls ausgewählt/deaktiviert. Das Hinzufügen einer separaten Klasse, wie es @Anoop vorgeschlagen hat, würde dies verhindern. –

+0

danke, das werde ich mir merken :) – WellNo

1

In eine andere Klasse für die Unterkontrollkästchen nehmen. tun, Sie können dann

$(".select-all").change(function() { 
    $(".subCheckbox").prop("checked", this.checked); 
}); 

Sie brauchen nicht auf eine Schleife durch alle Kontrollkästchen zu überprüfen sie.

Verwenden Sie einfach den Klassenselektor und prop() Methode.

Fiddle

+0

lassen Sie mich es versuchen :) – WellNo

+0

Ich sehe es funktioniert, aber nicht für mich gearbeitet:/aber trotzdem danke, die Antwort unter Ihnen hat mir geholfen, eine Menge :) – WellNo

0
$(".select-all").change(function() { 
    $(this).closest('table').find('input[type=checkbox]').prop('checked',this.checked);}) 
Verwandte Themen