javascript - jquery之前检查td中的复选框

Question

我有一个 html 表格，其中 td 包含一个像这样的复选框输入

<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>
<script>
$('[type=checkbox]').change(function () {
    if($(this).is(":checked")) {
       $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true);
    }
});
</script>

我想在 jquery 中创建一个函数，当我选中一个复选框时，会选中它上面的一个(例如，如果选中 td3，那么也会选中 td1)，但我使用的函数会检查旁边的输入，而不是上面的输入。

感谢您的帮助

Answer 1

尽管使用纯 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 demo .

引用文献:

• Array.from() .
• Array.prototype.forEach() .
• Array.prototype.slice() .
• document.getElementById() .
• document.querySelector() .
• document.querySelectorAll() .
• HTMLTableCellElement properties, including cellIndex .
• EventTarget.addEventListener() .
• Node.childNodes .
• Node.parentNode .
• NonDocumentTypeChildNode.previousElementSibling .
• ParentNode.children .