Jquery select all checkboxes in table

Question

I have a script that should check all the checkboxes in a table. It checks them all the first time, it unchecks them after that. However, when I try to recheck them nothing happens.

the jquery:

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).attr('checked',e.target.checked);
});

the HTML:

<table>
    <tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th>
            hi!
        </th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="1"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="2"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
</table>

here's a fiddle of the behavior:

http://jsfiddle.net/EEJrU/

Why is it not working after being clicked once?

Answer 1

You need to use .prop() instead of .attr()

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).prop('checked',this.checked);
});

Demo: Fiddle

Attributes vs. Properties

Answer 2

Simple jQuery solution, with detection of checked inputs inside of the table, and state change for main (selectAll) checkbox:

$(document).ready(function() {
  var $selectAll = $('#selectAll'); // main checkbox inside table thead
  var $table = $('.table'); // table selector 
  var $tdCheckbox = $table.find('tbody input:checkbox'); // checboxes inside table body
  var tdCheckboxChecked = 0; // checked checboxes

  // Select or deselect all checkboxes depending on main checkbox change
  $selectAll.on('click', function () {
    $tdCheckbox.prop('checked', this.checked);
  });

  // Toggle main checkbox state to checked when all checkboxes inside tbody tag is checked
  $tdCheckbox.on('change', function(e){
    tdCheckboxChecked = $table.find('tbody input:checkbox:checked').length; // Get count of checkboxes that is checked
    // if all checkboxes are checked, then set property of main checkbox to "true", else set to "false"
    $selectAll.prop('checked', (tdCheckboxChecked === $tdCheckbox.length));
  })
});

table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #222;
}

table tr th {
  background: #333;
  color: #eee;
}

table tr:nth-child(odd) td {
  background: #ececec;
}

td, th {
  padding: 10px 14px;
  text-align: center;
  border: none;
}

.checkbox {
  position: relative;
}

.checkbox [type="checkbox"] {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.checkbox [type="checkbox"] + label {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid;
  cursor: pointer;
  border-radius: 2px;
  will-change: color;
  transition: .2s color ease-in-out;
}

table thead .checkbox [type="checkbox"] + label:hover,
table thead .checkbox [type="checkbox"] + label:hover:after {
  color: #d80;
}

table tbody .checkbox [type="checkbox"] + label:hover,
table tbody .checkbox [type="checkbox"] + label:hover:after {
  color: #8d0;
}

.checkbox [type="checkbox"] + label:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 12px;
  top: 50%;
  left: 50%;
  border-bottom: 2px solid;
  border-right: 2px solid;
  margin-top: -2px;
  opacity: 0;
  transform: translate(-50%, 0%) rotate(45deg) scale(.75);
  will-change: opacity, transform, color;
  transition: .17s opacity ease-in-out, .2s transform ease-in-out, .2s color ease-in-out;
}

.checkbox [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>
        <div class="checkbox">
          <input type="checkbox" id="selectAll">
          <label for="selectAll"></label>
        </div>
      </th>
      <th>Email</th>
      <th>Join date <i class="arrow bottom"></i></th>
    </tr>
  </thead>
  
  <tbody>
    <tr class="active">
      <td>
        <div class="checkbox">
          <input type="checkbox" id="tr-checkbox1">
          <label for="tr-checkbox1"></label>
        </div>
      </td>
      <td>[email protected]</td>
      <td>21 Oct, 2016 at 11:29 pm</td>
    </tr>

    <tr>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="tr-checkbox2">
          <label for="tr-checkbox2"></label>
        </div>
      </td>
      <td>[email protected]</td>
      <td>03 Mar, 2018 at 08:36 am</td>
    </tr>

    <tr>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="tr-checkbox3">
          <label for="tr-checkbox3"></label>
        </div>
      </td>
      <td>[email protected]</td>
      <td>11 Jan, 2020 at 01:47 am</td>
    </tr>
  </tbody>
</table>

Answer 3

    <HTML>
    <HEAD>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    </HEAD>
    <BODY>

    <table border="1">
    <tr>
        <th><input type="checkbox" id="selectall"/></th>
        <th>Cell phone</th>
        <th>Rating</th>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
        <td>BlackBerry Bold 9650</td>
        <td>2/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
        <td>Samsung Galaxy</td>
        <td>3.5/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
        <td>Droid X</td>
        <td>4.5/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
        <td>HTC Desire</td>
        <td>3/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
        <td>Apple iPhone 4</td>
        <td>5/5</td>
    </tr>
    </table>

    </BODY>
    </HTML>




<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            oTable = $('#datatable').dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            });

            $("#selectall").click(function () {
                var checkAll = $("#selectall").prop('checked');
                    if (checkAll) {
                        $(".case").prop("checked", true);
                    } else {
                        $(".case").prop("checked", false);
                    }
                });

            $(".case").click(function(){
                if($(".case").length == $(".case:checked").length) {
                    $("#selectall").prop("checked", true);
                } else {
                    $("#selectall").prop("checked", false);
                }

            });
        } );




    </script>