チェックボックスがオンの場合はJqueryコード、他のチェックボックスはすべて選択 - Laravelの使用

Question

少し問題がありますが解決策が見つかりませんでした。それは私のビューのテーブルについてのもので、すべてのテーブル行は自分のチェックボックスを持っています。私がそれを選択している場合、他のすべてのチェックボックスをチェックする別のメインチェックボックスがあります。

私の問題は、私が望むようにうまくいかないことです。

ビュー：

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

私は私のforeachループの内側ともで私の<input>タグに「を選択し、すべてを」クラスを追加する場合はjQueryのスクリプトは、大丈夫ですすべてのチェックボックスが選択されています。私のforeachループ内のフィールドからクラスを削除した場合、それはもう動作しません。私の問題は、メインのチェックボックスですべてのボックスだけを選択したいということです。現時点では、どのチェックボックスを選択しても問題ありません。すべてのチェックボックスが選択されます。 （私は1つの行または2を選択するオプションを持っていません。

を選択し、すべてのクラスがない私の入力フィールドに自分のforeachループの内部で、ちょうど私のメインのチェックボックスの入力フィールドである。

おかげであなたの時間と私の悪い英語のため申し訳ありません

Answer 1

サブチェックボックスを選び出すためのあなたのjQueryのセレクタが少しずれているように見えます。試してみてください：

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

Answer 2

サブチェックボックスに別のクラスを追加します。 次に、あなたが行うことができ、

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

を取るためかを確認するために、すべてのチェックボックスをループする必要はありません。それら。

クラスセレクタとprop()メソッドを使用してください。

Fiddle

Answer 3

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