我怎样才能得到最后一个的价值？

I need to print the word of Emails on click of all checkboxes. How can I do that? Here is my HTML structure:

我需要点击所有复选框打印电子邮件一词。我怎样才能做到这一点?这是我的HTML结构:

$('td input').on('change', function() {
  var header_name = $(this).closests('tr').sibilings('th').last().text();
  console.log(header_name);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th><input type="checkbox" class="all_checkboxes"></th>
      <th>Emails</th>
    </tr>
    <tr>
      <td><input type="checkbox" data-id="email"></td>
      <td>email</td>
    </tr>
    <tr>
      <td><input type="checkbox" data-id="gmail"></td>
      <td>gmail</td>
    </tr>
    <tr>
      <td><input type="checkbox" data-id="aol"></td>
      <td>aol</td>
    </tr>
    <tr>
      <td><input type="checkbox" data-id="chmail"></td>
      <td>chmail</td>
    </tr>
  </tbody>
</table>

2 个解决方案

#1

Firstly you have a couple of typos. closests() should be closest() and sibilings() needs to be siblings().

首先你有一些错别字。 closests()应该是nearest(),sibilings()需要是兄弟()。

The issue itself is because your DOM traversal is not correct. You're trying to look at sibling th of the parent tr to the clicked input, when the th you're aiming for is in a completely different row.

问题本身是因为您的DOM遍历不正确。当你瞄准的是一个完全不同的行时,你正试图看看父对象的兄弟对被点击的输入。

To fix this you should use closest() to get the table, then find() the tr:last, like this:

要解决这个问题,你应该使用nearest()来获取表,然后找到()tr:last,如下所示:

$('td input').on('change', function() {
  var header_name = $(this).closest('table').find('th:last').text();
  console.log(header_name);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th><input type="checkbox" class="all_checkboxes"></th>
      <th>Emails</th>
    </tr>
    <tr>
      <td><input type="checkbox" data-id="email"></td>
      <td>email</td>
    </tr>
    <tr>
      <td><input type="checkbox" data-id="gmail"></td>
      <td>gmail</td>
    </tr>
    <tr>
      <td><input type="checkbox" data-id="aol"></td>
      <td>aol</td>
    </tr>
    <tr>
      <td><input type="checkbox" data-id="chmail"></td>
      <td>chmail</td>
    </tr>
  </tbody>
</table>

#2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
       <tr>
          <th><input type="checkbox" class="all_checkboxes"></th>
          <th>Emails</th>
       </tr>
       <tr>
          <td><input type="checkbox" data-id="email"></td>
          <td>email</td>
       </tr>
       <tr>
          <td><input type="checkbox" data-id="gmail"></td>
          <td>gmail</td>
       </tr>
       <tr>
          <td><input type="checkbox" data-id="aol"></td>
          <td>aol</td>
       </tr>
       <tr>
          <td><input type="checkbox" data-id="chmail"></td>
          <td>chmail</td>
       </tr>
    </tbody>    
</table>
<script>
    $('td input, th input').on('change', function(){
        var header_name = $( "tr:first" ).last().text();
        console.log(header_name);
    })
</script>

#1