CODEWITHSUNDEEP
javascriptjqueryhtml
Vlad N
Vlad N

Reputation: 651

HTML Row table selection

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

Upvotes: 3

Views: 119

Answers (4)

epascarello
epascarello

Reputation: 207511

I would just trigger change and not have the logic in multiple places

$('#selectAll').click(function(event) {
    $(':checkbox').prop("checked",this.checked).change();
});

$("input[type='checkbox']").change(function (e) {
    $(this).closest('tr').toggleClass("highlight_row", this.checked);
});

Now what I would do for the html is you should use thead and tbody instead of using a class to say you have a head row.

Upvotes: 1

jmcgriz
jmcgriz

Reputation: 3358

JsFiddle

Made a small tweak to your working example that dispatches a click event to the checkboxes that need to be changed. This should properly trigger the onchange event for those boxes

The new section looks like this:

if(this.checked) {
// Iterate each checkbox
  $(':checkbox').not(":checked").click()
}
else {
  $(':checkbox:checked').click()
}

Upvotes: 0

jcubic
jcubic

Reputation: 66490

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>

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 2

Related Questions