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，但有一种方法是将foreach my $row ( @all_rows ) { print $row -> {name},"\n"; }事件的事件监听器分配给父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;
    }

  });
});

JS Fiddle demo

参考文献：

Answer 2

使用index()获取点击复选框td的索引，并相应地检查上一个复选框

＆＃13;

$('[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);
    }
});

＆＃13;

<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>

＆＃13;

Answer 3

检查以下示例。它使用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>

Answer 4

您可以这样做：

$('[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>

Jquery检查之前的td中的复选框

4 个答案: