Событие по клику на строке <tr>

322

03 мая 2017, 10:54

Есть таблица, вот кусок:

<tbody>
<tr><td><label><input type="checkbox" class="checkbox2"><span class="checkbox-custom2"></span></label></td><td>27.04.2017</td><td>28.04.2017</td><td>118725-31521</td><td></tr>
<tr><td><label><input type="checkbox" class="checkbox2"><span class="checkbox-custom2"></span></label></td><td>27.04.2017</td><td>28.04.2017</td><td>118725-31521</td><td></tr>
<tr><td><label><input type="checkbox" class="checkbox2"><span class="checkbox-custom2"></span></label></td><td>27.04.2017</td><td>28.04.2017</td><td>118725-31521</td><td></tr>
</tbody>

нужно чтобы по клику на строке выбирался чекбокс этой строки. Помогите пожалуйста.

P.S> стиль чекбоксов заменён на свой

Answer 1

$('#myTable tr').click(function(e){ 
  if (!$(e.target).is(':checkbox')) { // игнорировать если кликнули чекбокс 
    var checkbox = $(this).find('input[type="checkbox"]') 
    checkbox.prop("checked", !checkbox.prop("checked")); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table id='myTable'> 
<tbody> 
<tr> 
<td><label><input type="checkbox" class="checkbox2"><span class="checkbox-custom2"></span></label></td><td>27.04.2017</td><td>28.04.2017</td><td>118725-31521</td><td></tr> 
 
<td><label><input type="checkbox" class="checkbox2"><span class="checkbox-custom2"></span></label></td><td>27.04.2017</td><td>28.04.2017</td><td>118725-31521</td><td></tr> 
 
<td><label><input type="checkbox" class="checkbox2"><span class="checkbox-custom2"></span></label></td><td>27.04.2017</td><td>28.04.2017</td><td>118725-31521</td><td></tr> 
</tbody> 
</table>

Answer 2

Можно на чистом JS, без jQuery вот так:

var table = document.getElementById("table"); // наша таблица 
var tbody = table.getElementsByTagName("tbody")[0]; // тело таблицы 
 
tbody.onclick = function(e) { // событие клика по таблице 
  e = e || window.event; // событие 
  var target = e.srcElement || e.target; // источник события 
 
  if (target.type === 'checkbox') { // если кликнули чек-бокс 
    return; // то нам не нужно ничего делать, он сделает все сам 
  } 
 
  while (target && target.nodeName !== "TR") { // нужен элемент строки TR 
    target = target.parentNode; // переходим к родителю 
  } 
 
  var cb = target.getElementsByClassName("checkbox2"); // берем чек бокс из строки TR 
  cb[0].checked = !cb[0].checked; // инверсия чек-бокса (на противоположное значение) 
};

<table id='table'> 
  <tbody> 
    <tr> 
      <td> 
        <label> 
          <input type="checkbox" class="checkbox2"> 
          <span class="checkbox-custom2"></span> 
        </label> 
      </td> 
      <td>27.04.2017</td> 
      <td>28.04.2017</td> 
      <td>118725-31521</td> 
      <td> 
    </tr> 
    <tr> 
      <td> 
        <label> 
          <input type="checkbox" class="checkbox2"> 
          <span class="checkbox-custom2"></span> 
        </label> 
      </td> 
      <td>27.04.2017</td> 
      <td>28.04.2017</td> 
      <td>118725-31521</td> 
      <td> 
    </tr> 
    <tr> 
      <td> 
        <label> 
          <input type="checkbox" class="checkbox2"> 
          <span class="checkbox-custom2"></span> 
        </label> 
      </td> 
      <td>27.04.2017</td> 
      <td>28.04.2017</td> 
      <td>118725-31521</td> 
      <td> 
    </tr> 
  </tbody> 
</table>

Answer 3

Альтернативным вариантом решения, может быть запрет всплытия события onclick при клике на сам label, в котором лежит checkbox, это позволит избежать проверки на то, куда кликнули в обработчике клика по строке.

var trs = document.querySelectorAll("table tr"); // тело таблицы 
 
Array.from(trs).forEach(tr => { 
  tr.addEventListener('click', function() { 
    var cb = this.querySelector('input[type="checkbox"]'); 
    cb.checked = !cb.checked; 
  }); 
  tr.querySelector('label') 
    .addEventListener('click', e => e.stopPropagation()); 
});

<table id='table'> 
  <tbody> 
    <tr> 
      <td> 
        <label> 
          <input type="checkbox" class="checkbox2"> 
          <span class="checkbox-custom2">label1</span> 
        </label> 
      </td> 
      <td>27.04.2017</td> 
      <td>28.04.2017</td> 
      <td>118725-31521</td> 
      <td> 
    </tr> 
    <tr> 
      <td> 
        <label> 
          <input type="checkbox" class="checkbox2"> 
          <span class="checkbox-custom2">label2</span> 
        </label> 
      </td> 
      <td>27.04.2017</td> 
      <td>28.04.2017</td> 
      <td>118725-31521</td> 
      <td> 
    </tr> 
    <tr> 
      <td> 
        <label> 
          <input type="checkbox" class="checkbox2"> 
          <span class="checkbox-custom2">label3</span> 
        </label> 
      </td> 
      <td>27.04.2017</td> 
      <td>28.04.2017</td> 
      <td>118725-31521</td> 
      <td> 
    </tr> 
  </tbody> 
</table>