Jquery之前选中td中的复选框

虽然使用纯JavaScript而不是jQuery，但一种方法是将change事件的事件侦听器分配给父<td>元素。从中查找其cellIndex属性以查找正确的单元格，并在前一行中查找子代<input>以更改：

// retrieve the <table> element, by its id property:
var table = document.getElementById('my_table'),
  // find all the <td> elements within the <table>:
  cells = table.getElementsByTagName('td'),
  // convert the collection of <td> elements
  // into an Array (using an ES5 approach because
  // of my work browser):
  cellArray = Array.prototype.slice.call(cells, 0);
  // if ES6 is available to you the following would
  // be more concise:
  // cellArray = Array.from( cells );
// iterating over the Array of cells:
cellArray.forEach(function(cell) {
  // 'cell', the first argument, is a reference to
  //         the current array-element (a <td> node)
  //         of the Array over which we're iterating.
  // here we add the event-listener for the 'change'
  // event, using the anonymous method to handle the
  // functionality:
  cell.addEventListener('change', function(e) {
    // 'this' is the <td> element, the 'cell' variable:
    var index = this.cellIndex,
      // e is the event-object passed into the
      // anonymous function,
      // e.target is the element that triggered
      // the event we were listening for, the
      // descendant <input>; the checked property
      // is Boolean, and will return true if it's
      // checked and false if not:
      checked = e.target.checked,
      // the parentNode of a <td> is the <tr>:
      row = this.parentNode,
      // the previous <tr> element is the
      // previousElementSibling (the first
      // of the element's previous-siblings
      // that is also an element, so excluding
      // textNodes, commentNodes etc:
      previousRow = row.previousElementSibling;
    // if we have a previous row:
    if (previousRow) {
      // we find its children (which are elements,
      // children is different from childNodes):
      previousRow.children[index]
        // we then find the first, if any, <input>
        // element with a 'type' property of 'checkbox':
        .querySelector('input[type=checkbox]')
        // and set its checked state to the same
        // Boolean value as the <input> which fired the
        // the change event:
        .checked = checked;
    }
  });
});

var table = document.getElementById('my_table'),
  cells = table.getElementsByTagName('td'),
  cellArray = Array.prototype.slice.call(cells, 0);
cellArray.forEach(function(cell) {
  cell.addEventListener('change', function(e) {
    var index = this.cellIndex,
      checked = e.target.checked,
      row = this.parentNode,
      previousRow = row.previousElementSibling;
    if (previousRow) {
      previousRow.children[index].querySelector('input[type=checkbox]').checked = checked;
    }
  });
});

<table id="my_table">
  <tr>
    <td>
      <input type="checkbox" name="td1">
    </td>
    <td>
      <input type="checkbox" name="td2">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="td3">
    </td>
    <td>
      <input type="checkbox" name="td4">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="td5">
    </td>
    <td>
      <input type="checkbox" name="td6">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="td7">
    </td>
    <td>
      <input type="checkbox" name="td8">
    </td>
  </tr>
</table>

JS Fiddle演示。

参考文献：

• Array.from()
• Array.prototype.forEach()
• Array.prototype.slice()
• document.getElementById()
• document.querySelector()
• CCD_ 10
• HTMLTableCellElement属性，包括cellIndex
• EventTarget.addEventListener()
• Node.childNodes
• Node.parentNode
• CCD_ 16
• ParentNode.children

使用index()获取点击复选框td的索引，并相应地选中另一个先前的复选框

$('[type=checkbox]').change(function () {
    index = $(this).closest('td').index();
    if($(this).is(":checked")) {
       $(this).closest('tr').prev().find('input:checkbox').eq(index).prop('checked', true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="my_table">
  <tr>
   <td><input type="checkbox" name="td1"></td>
   <td><input type="checkbox" name="td2"></td>
  </tr>
<tr>
   <td><input type="checkbox" name="td3"></td>
   <td><input type="checkbox" name="td4"></td>
  </tr>
 </table>

检查以下示例。它使用index()来获取单击的单元格的索引。然后选择前一行并找到相应的复选框：

$('[type=checkbox]').change(function () {
    var that = $(this);
    // Get clicked cell's index
    var index = that.closest('td').index();
    // Get previous row's cell with same index
    var aboveTd = that.closest('tr').prev('tr').find('td').eq(index).find('input[type=checkbox]');
    // Toggle checked state
    aboveTd.prop('checked', that.is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my_table">
  <tr>
   <td><input type="checkbox" name="td1"></td>
   <td><input type="checkbox" name="td2"></td>
  </tr>
<tr>
   <td><input type="checkbox" name="td3"></td>
   <td><input type="checkbox" name="td4"></td>
  </tr>
 </table>

您可以这样做：

$('[type=checkbox]').change(function() {
  if ($(this).closest('tr').prev().has('input[type="checkbox"]')) {
    var idx = $(this).closest('td').index();
    $(this).closest('tr').prev().find('td:eq(' + idx + ') input[type=checkbox]').prop('checked', this.checked);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my_table">
  <tr>
    <td>
      <input type="checkbox" name="td1">
    </td>
    <td>
      <input type="checkbox" name="td2">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="td3">
    </td>
    <td>
      <input type="checkbox" name="td4">
    </td>
  </tr>
</table>