Как получить базовый элемент в JQuery

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');
        $(this)
    } );

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

Но как я могу установить флажок?

------ ОБНОВЛЕНИЕ:

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

Вы должны использовать класс .delete вместо id, поскольку флажок будет повторяться для каждой строки.

Приведенный ниже код распознает щелчок по tr, проверяет, является ли .selectedкласс существует и заставляет флажок следовать за ним - т.е. проверять, выбрана ли строка.

Надеюсь, это поможет

---

Демо

// Add click event to the table, for any row
$('#clients tbody').on('click', 'tr', function() {
  
  // Toggle the selected class
  $(this).toggleClass('selected');

  // Assign a checked value to the input within that row, the value should match the boolean check for the class active (i.e. false if the class is not present on the row) 
  $(this).find("input.delete").prop('checked', $(this).hasClass("selected"));


});


// Your button code
$('#button').click(function() {
  alert($("#clients tbody tr.selected").length + ' row(s) selected');
});

tr.selected {
  background: yellow;
}

<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" class="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>

    <tr>
      <td><input type="checkbox" class="delete" value="2"></td>
      <td id="rowid">2</td>
      <td>3</td>
      <td>test3</td>
      <td>emai23l@gmail.com</td>
      <td>2</td>
      <td>6</td>
      <td>2018-12-31 09:48:29 </td>
    </tr>
    
  </tbody>

</table>


<button id="button">How many rows are selected?</button>

Answer 2

Добавьте этот код к нажмите событие tr :

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

---

ОБНОВЛЕНИЕ :

Если вы хотите игнорировать событие нажатия на tr , когда вашей основной целью является chekcbox, обработайте этот код:

$('tr input[type=checkbox]').on('click',function(event){
    event.stopPropagation();
})