Проблема с таблицами данных: как я могу установить флажок, а затем выделить строку и наоборот?

Question

У меня есть строка таблицы, и я хочу получить ячейку в таблице, например:

<tr>
    <td><input type="checkbox"id="delete" value="1"></td>
                        <td id="rowid">1</td>
                        <input 
                        <td>2</td>
                        <td>test</td>
                        <td>email@gmail.com</td>
                        <td>1</td>
                        <td>5</td>
                        <td>2018-12-31 09:28:29 </td>
        </tr>

У меня есть код jquery:

$(document).ready(function() {
    var table = $('#clients').DataTable();

    $('#clients tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
        var _element = $(this).find('input[type=checkbox]');
        var checkboxStatus = _element.prop('checked'); //true or false
        _element.prop('checked',!checkboxStatus); // If checkbox is 
        //checked, turn it to uncheck and if is unchecked, check it
} );
    } );

    $('#button').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
    } );
} );

Но теперь, когда я нажимаю флажок, он не проверяется, и класс проверенного не добавляется к входу флажка.

Я хочу, чтобы, если я нажму целое, флажок станет установленным. Теперь это работает, но когда я отмечаю флажок, он подсвечивается, но флажок не устанавливается.

Answer 1

Добавьте прослушиватель событий по щелчку к вашему флажку, останавливая распространение события в строке, а затем переключите класс на ближайшую строку флажка:

$(document).ready(() => {
  $('#clients tbody').on('click', 'tr', function(e) {
    $(this).toggleClass('selected');
    var _element = $(this).find('input[type=checkbox]');
    var checkboxStatus = _element.prop('checked');
    _element.prop('checked', !checkboxStatus);
  });
  
  $('#clients tbody').on('click', 'input[type=checkbox]', function(e) {
    e.stopPropagation();
    $(this).closest('tr').toggleClass('selected');
  });
});

.selected {
  background: red;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients">
  <tbody>
    <tr>
      <td><input type="checkbox" id="delete" value="1" /></td>
      <td id="rowid">1</td>
      <td>2</td>
      <td>test</td>
      <td>email@gmail.com</td>
      <td>1</td>
      <td>5</td>
      <td>2018-12-31 09:28:29 </td>
    </tr>
</table>

p.s. в вставленном фрагменте у вас есть недопустимый тег input, обертывающий td