Нажмите строки таблицы, чтобы выбрать флажок, используя jQuery

Ответ 1

Чтобы выбрать флажок в строке внутри таблицы, мы сначала проверим, не является ли type attribute элемента, который мы нацеливаем, если это не чекбокс, чем мы проверим все флажки вложенные внутри этой строки таблицы.

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

Демо

Если вы хотите выделить строку таблицы на checkbox checked, чем мы можем использовать условие if с is(":checked"), если да, чем мы найдем ближайший элемент tr, используя .closest(), и чем мы добавьте к нему класс, используя addClass()

$("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) { //If the checkbox is checked
        $(this).closest('tr').addClass("highlight_row"); 
        //Add class on checkbox checked
    } else {
        $(this).closest('tr').removeClass("highlight_row");
        //Remove class on checkbox uncheck
    }
});

Демо

Ответ 2

Этот вопрос был полезен для меня, но у меня была проблема с предыдущим решением. Если вы нажмете на ссылку в ячейке таблицы, она переключит флажок. Я googled это, и я увидел предложение добавить event.stopPropagation() в ссылках таблицы, например:

$('.record_table tr a').click(function(event) {
  event.stopPropagation();
});

Это решение было плохой идеей, потому что у меня было несколько загрузочных загрузок jquery по ссылке таблицы...

Итак, вот решения, которые мне подходят лучше. Кстати, когда я использую bootstrap 2.3, подсветка линии создается путем добавления класса "info" в tr. Чтобы использовать этот код, вам просто нужно добавить class="selectable" в тег таблицы.

$(".selectable tbody tr input[type=checkbox]").change(function(e){
  if (e.target.checked)
    $(this).closest("tr").addClass("info");
  else
    $(this).closest("tr").removeClass("info");
});

$(".selectable tbody tr").click(function(e){
  if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
    var cb = $(this).find("input[type=checkbox]");
    cb.trigger('click');
  }
});

Вероятно, вы захотите более точно определить условия теста, например, если у вас есть другие входы в строке.

Ответ 3

Запуск клика, как и многие из приведенных выше решений, заставит функцию работать дважды. Вместо этого обновите значение prop:

$('tr').click(function(event){
  alert('function runs twice');
  if(event.target.type !== 'checkbox'){
    //$(':checkbox', this).trigger('click');
    // Change property instead
    $(':checkbox', this).prop('checked', true);
  }
});

Ссылка на пример jsfiddle здесь

Ответ 4

Вы можете просто вызвать это событие click...:)

  $(document).ready(function()
    {
      $("table tr th :checkbox").click(function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

ИЛИ

  $(document).ready(function()
    {
      $("table tr th :checkbox").on('click',function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

Ответ 5

Даже если принятый @Mr. Ответ Alien отлично работает, он не работает, если вы решите добавить новую строку <tr> динамически с помощью jQuery в какой-то момент.

Я рекомендую использовать подход делегирования событий, который представляет собой лишь небольшую модификацию принятого ответа.

Вместо:

... $('.record_table tr').click(function(event) { ...

использование

... $('.record_table').on('click', 'tr', function(event) { ...

И то же самое для подсветки используйте:

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

Дополнительная информация здесь: Событие Click не срабатывает для динамических таблиц строк