Select All Checkbox is not working as it must be working

Question

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>

Another possible way to go about it is to give your selectAll checkbox a data attribute that changes when the box is checked and unchecked and you can do some `if-else` statement based on the data attribute foreach checkbox — King11, Nov 21 '19 at 17:10
Hi @MaazKhan, remove your php code and paste your output code as html — jvk, Nov 21 '19 at 17:16
I would use `.prop("checked", true/false)` instead of `.attr("checked", "....")` — PeterKA, Nov 21 '19 at 17:18

yqlim · Answer 1 · 2019-11-21T17:23:02.170

Use .prop instead of .attr.

The problem is that with .attr, it only sets the attribute checked. However, when you click the checkboxes, the browser updates the its .checked property, not its checked attribute.

Using .prop, it will update the .checked property of a checkbox, so it will be in sync with the value change.

Working example:

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="BulkSelect" type="checkbox" /> Select All
<hr>
<input class="Bulkers" type="checkbox" /> 0<br>
<input class="Bulkers" type="checkbox" /> 1<br>
<input class="Bulkers" type="checkbox" /> 2<br>
<input class="Bulkers" type="checkbox" /> 3<br>
<input class="Bulkers" type="checkbox" /> 4<br>
<input class="Bulkers" type="checkbox" /> 5<br>
<input class="Bulkers" type="checkbox" /> 6<br>
<input class="Bulkers" type="checkbox" /> 7<br>
<input class="Bulkers" type="checkbox" /> 8<br>
<input class="Bulkers" type="checkbox" /> 9<br>

https://stackoverflow.com/questions/46939538/difference-between-script-src-foo-js-script-and-script-src-foo-js/46939597#46939597 — Scott Marcus, Nov 21 '19 at 17:22

score 1 · Accepted Answer · answered Nov 21 '19 at 17:25

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>

Select All Checkbox is not working as it must be working

2 Answers2