HTML Row table selection

Question

I have a table where the first column is a checkbox that selects the current row and the header has a SelectAll checkbox. The table also gets selected when the user clicks on the row ( the checkbox becomes checked ).

My problem is that when I do the select all, all the checkboxes get selected but the rows are not being selected also.

My checkboxes have the change function so I assumed that when I hit the select all, the change method would execute as well, but this does not happen.

$(document).ready(function() {

  $('#selectAll').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
        this.checked = true;
      });
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      });
    }
  });

  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });

  $("input[type='checkbox']").change(function(e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight_row");
    } else {
      $(this).closest('tr').removeClass("highlight_row");
    }
  });
});

.record_table {
  width: 100%;
  border-collapse: collapse;
}
.record_table tr:hover {
  background: #eee;
}
.record_table td {
  border: 1px solid #eee;
}
.highlight_row {
  background: #eee;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table class="record_table" id="table-patient-time">
  <tr class="header">
    <th>
      <input type="checkbox" id="selectAll" />
    </th>
    <th>Hello</th>
    <th>Hello</th>
  </tr>
  <tr class="selectable">
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

JS Fiddle here

Answer 1

You can fix this by triggering change event in click event:

  $('#selectAll').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
        this.checked = true;
      }).change();
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      }).change();
    }
  });

$(document).ready(function() {

  $('#selectAll').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
        this.checked = true;
      }).change();
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      }).change();
    }
  });

  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });

  $("input[type='checkbox']").change(function(e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight_row");
    } else {
      $(this).closest('tr').removeClass("highlight_row");
    }
  });
});

.record_table {
  width: 100%;
  border-collapse: collapse;
}
.record_table tr:hover {
  background: #eee;
}
.record_table td {
  border: 1px solid #eee;
}
.highlight_row {
  background: #eee;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table class="record_table" id="table-patient-time">
  <tr class="header">
    <th>
      <input type="checkbox" id="selectAll" />
    </th>
    <th>Hello</th>
    <th>Hello</th>
  </tr>
  <tr class="selectable">
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

Answer 2

Working fiddle

You could add class highlight_row and remove it in selectAll click event :

$('#selectAll').click(function(event) {
    if(this.checked) {
      // Iterate each checkbox
        $(':checkbox').each(function() {
          this.checked = true;
          $(this).closest('tr').addClass('highlight_row');
        });
    }
    else {
        $(':checkbox').each(function() {
          this.checked = false;
          $(this).closest('tr').removeClass('highlight_row');
        });
    }
});

Hope this helps.

---

$(document).ready(function () {

    $('#selectAll').click(function(event) {
        if(this.checked) {
          // Iterate each checkbox
            $(':checkbox').each(function() {
              this.checked = true;
              $(this).closest('tr').addClass('highlight_row');
            });
        }
        else {
            $(':checkbox').each(function() {
              this.checked = false;
              $(this).closest('tr').removeClass('highlight_row');
            });
        }
    });

  $('.record_table tr').click(function (event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });

  $("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight_row");
    } else {
      $(this).closest('tr').removeClass("highlight_row");
    }
  });
});

.record_table {
    width: 100%;
    border-collapse: collapse;
}
.record_table tr:hover {
    background: #eee;
}
.record_table td {
    border: 1px solid #eee;
}
.highlight_row {
    background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="record_table" id="table-patient-time">
<tr class="header">
        <th>
            <input type="checkbox" id= "selectAll" />
        </th>
        <th>Hello</th>
        <th>Hello</th>
    </tr>
    <tr class="selectable">
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
</table>