CODEWITHSUNDEEP
jquerycheckbox
Snowburnt
Snowburnt

Reputation: 6932

Jquery select all checkboxes in table

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?

Upvotes: 29

Views: 115042

Answers (5)

K. Yurii
K. Yurii

Reputation: 101

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>

Or vanilla solution:

let table = document.querySelector('.table'); // table selector 
let selectAll = table.querySelector('#selectAll'); // main checkbox inside table thead
let tdCheckbox = table.querySelectorAll('tbody input[type="checkbox"]'); // checboxes inside table body
let tdCheckboxChecked = 0; // checked checboxes

// Select or deselect all checkboxes depending on main checkbox change
selectAll.addEventListener('click', () => {
  Array.from(tdCheckbox).forEach(el => {
    el.checked = selectAll.checked;
  })
});

// Toggle main checkbox state to checked when all checkboxes inside tbody tag is checked
Array.from(tdCheckbox).forEach(el => {
  el.addEventListener('change', function(e){
    tdCheckboxChecked = Array.from(tdCheckbox).filter(el => el.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.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);
}
    <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>

Upvotes: 6

Aashis Binod Khanal
Aashis Binod Khanal

Reputation: 563

Just in case there is <tbody> within the <table>, finding <td> to closet table doesn't work.

It worked with me like this: 

$(document).ready(function() {
    $('#selectAll').click(function(e){        
        $(this).closest('tbody').find('td input:checkbox').prop('checked', this.checked);
    });
});

Upvotes: 0

The Java Guy
The Java Guy

Reputation: 2291

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

Upvotes: 4

Shen
Shen

Reputation: 174

This might be useful on the difference between prop() and attr(). Note this line in this article .prop() vs .attr():

"The attribute value reflects the default rather than the current visible state (except in some older versions of IE, thus making things still harder). The attribute tells you nothing about the whether the checkbox on the page is checked."

So in general, use prop() instead of attr().

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388436

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

Upvotes: 107

Related Questions