Select All Checkbox is not working as it must be working

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.

Note that I am using the Laravel framework so don't react on php 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");
    }
  });
});

<table id="data-table" class="table table-striped table-bordered table-hover">
  <thead>
   <tr>
      <th><input type="checkbox" id="BulkSelect"></th>
      <th>Hater's Name</th>
      <th>Hater's Profile Link</th>
      <th>Victim's Name</th>
      <th>Victim's Post Link</th>
      <th>Country</th>
      <th>Source</th>
      <th>
        <div class="btn-group" role="group">
          <button id="btnGroupDrop3" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Action
          </button>
          <div class="dropdown-menu" aria-labelledby="btnGroupDrop3" x-placement="bottom-start">
            <form method="post" id="BulkDelete" action="{{my_route}}">
              @csrf
              <button type="submit" class="dropdown-item">Delete</button>
              <button type="button" onclick="BulkApprove()" class="dropdown-item">Approve</button>
            </form>
          </div>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    @php($i = 0) @foreach($tables as $table)
      <tr class="gradeX">
        <td><input type="checkbox" name="ids[]" form="BulkDelete" class="Bulkers" value="{{$table->id}}"></td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>
          <div class="btn-group" role="group">
            <button id="btnGroupDrop3" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Action
            </button>
          </div>
        </td>
      </tr>
    @endforeach
  </tbody>
</table>

Actually since you're using attr when you unselect one after bulk select the Select All checkbox remains checked. Please feel free to check the docs on the difference between attr and prop

$(document).ready(function() {
  $("#BulkSelect").click(function() {
    $('.Bulkers').prop('checked', this.checked);
  });

  $('.Bulkers').change(function() {
    $("#BulkSelect").prop("checked", $(".Bulkers").length === $(".Bulkers:checked").length);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="BulkSelect" id="BulkSelect"/>Select All<br>
<input type="checkbox" class="Bulkers">Bulker 1<br>
<input type="checkbox" class="Bulkers">Bulker 1<br>
<input type="checkbox" class="Bulkers">Bulker 1<br>
<input type="checkbox" class="Bulkers">Bulker 1<br>
<input type="checkbox" class="Bulkers">Bulker 1<br>
<input type="checkbox" class="Bulkers">Bulker 1<br>
<input type="checkbox" class="Bulkers">Bulker 1<br>