title: Select All Checkbox is not working as it must be working
body: <p>I am trying to implement select all checkbox and its working fine the only problem is that when I deselect the checkboxes the select all function stops working for that specific checkbox.</p>
  
  <p>Note that I am using the Laravel framework so don't react on php code.</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#BulkSelect").click(function() {
      $('.Bulkers').attr('checked', this.checked);
    });
  
    $('.Bulkers').change(function() {
      if ($(".Bulkers").length == $(".Bulkers:checked").length) {
        $("#BulkSelect").attr("checked", "checked");
      } else {
        $("#BulkSelect").removeAttr("checked");
      }
    });
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table id="data-table" class="table table-striped table-bordered table-hover"&gt;
    &lt;thead&gt;
     &lt;tr&gt;
        &lt;th&gt;&lt;input type="checkbox" id="BulkSelect"&gt;&lt;/th&gt;
        &lt;th&gt;Hater's Name&lt;/th&gt;
        &lt;th&gt;Hater's Profile Link&lt;/th&gt;
        &lt;th&gt;Victim's Name&lt;/th&gt;
        &lt;th&gt;Victim's Post Link&lt;/th&gt;
        &lt;th&gt;Country&lt;/th&gt;
        &lt;th&gt;Source&lt;/th&gt;
        &lt;th&gt;
          &lt;div class="btn-group" role="group"&gt;
            &lt;button id="btnGroupDrop3" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
              Action
            &lt;/button&gt;
            &lt;div class="dropdown-menu" aria-labelledby="btnGroupDrop3" x-placement="bottom-start"&gt;
              &lt;form method="post" id="BulkDelete" action="{{my_route}}"&gt;
                @csrf
                &lt;button type="submit" class="dropdown-item"&gt;Delete&lt;/button&gt;
                &lt;button type="button" onclick="BulkApprove()" class="dropdown-item"&gt;Approve&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      @php($i = 0) @foreach($tables as $table)
        &lt;tr class="gradeX"&gt;
          &lt;td&gt;&lt;input type="checkbox" name="ids[]" form="BulkDelete" class="Bulkers" value="{{$table-&gt;id}}"&gt;&lt;/td&gt;
          &lt;td&gt;{{$table-&gt;column_name}}&lt;/td&gt;
          &lt;td&gt;{{$table-&gt;column_name}}&lt;/td&gt;
          &lt;td&gt;{{$table-&gt;column_name}}&lt;/td&gt;
          &lt;td&gt;{{$table-&gt;column_name}}&lt;/td&gt;
          &lt;td&gt;{{$table-&gt;column_name}}&lt;/td&gt;
          &lt;td&gt;{{$table-&gt;column_name}}&lt;/td&gt;
          &lt;td&gt;
            &lt;div class="btn-group" role="group"&gt;
              &lt;button id="btnGroupDrop3" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                Action
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      @endforeach
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>