单击同一行中的任何复选框时，选中/取消选中表行中的复选框

Check/uncheck a checkbox in the table row when any checkbox in the same row is clicked

本文关键字：复选框 选中 取消 一行 单击 任何      更新时间：2023-09-26

我有一个简单的表，如下所示，它在每行的第一列和最后一列都有复选框。

<table style="width:100%">
  <tr>
    <td><input type="checkbox" /></td>
    <td>Smith</td> 
    <td><input type="checkbox" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Jackson</td> 
    <td><input type="checkbox" /></td>
  </tr>
</table>

问题：当我选中/取消选中第一行中最后一列的复选框时，应该选中/取消选择同一行中第一列的复选复选框。类似地，如果我选中/取消选中第一列的复选框，那么相应的最后一列复选框应该被选中/取消复选。

如何在javascript中实现这一点？任何帮助或建议都将不胜感激。

这是我创造的小提琴：fiddle

谢谢。

使用:checkbox选择器选择输入类型checkbox元素。

试试这个：

$(':checkbox').on('change', function() {
  $(this).closest('tr').find(':checkbox').prop('checked', this.checked);
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Smith</td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Jackson</td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</table>

使用JavaScript：

使用querySelectorAll('[type="checkbox"]')查找checkbox元素。

试试这个：

var checkboxes = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(checkboxes, function(checkbox) {
  checkbox.onchange = function() {
    var currentRow = this.parentNode.parentNode;
    var cbElems = currentRow.querySelectorAll('[type="checkbox"]');
    [].forEach.call(cbElems, function(cb) {
      cb.checked = this.checked;
    }.bind(this))
  };
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
<table style="width:100%">
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Smith</td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Jackson</td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</table>

在Row表上切换Checkboxes的一种可能的Javascript解决方案点击如下所示：

HTML

<table id = "Table1">
  <tr>
    <td><input type="checkbox" /></td>
    <td>John Smith</td> 
    <td><input type="checkbox" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Anna Warner</td> 
    <td><input type="checkbox" /></td>
  </tr>
</table>

CSS

table, th, td{
  border: 1px solid #c0c0c0;
  border-collapse: collapse;
}
table{width:100%;}

Javascript

   // row click will toggle checkboxes
   row_OnClick("Table1")
   function row_OnClick(tblId) {
    try {
        var rows = document.getElementById(tblId).rows;
        for (i = 0; i < rows.length; i++) {
            var _row = rows[i];
            _row.onclick = null;
            _row.onclick = function () {
                return function () {selectRow(this);};
            }(_row);
        }
    }
    catch (err) { }
}
function selectRow(row) {
   row.cells[0].firstChild.checked = !row.cells[0].firstChild.checked;
   row.cells[2].firstChild.checked = row.cells[0].firstChild.checked;
}

正在以下位置进行jsfiddle演示：https://jsfiddle.net/t6nsxgnz/实际实施：http://busny.net

您可以通过修改selectRow(row)函数来进一步定制与您的任务相关的解决方案：

function selectRow(row) {
   row.cells[0].firstChild.checked = // add your code for the 1st CheckBox
   row.cells[2].firstChild.checked = // add your code for the 2nd CheckBox
}

jQuery中编码的该功能的另一个变体可以在在线流行测验引擎中找到(http://webinfocentral.com)，通过以下代码段实现：

// toggle Checkboxes on row click
$(Table1 tr').click(function (event) {
    // find the checkbox in the row
    var _chk = $(this).find('input:checkbox');

    if (!($(event.target).is("checkbox"))) {
        $(_chk).prop('checked', !$(_chk).prop('checked'));
    }
});

在这种情况下，Row Click（在Row的任何位置）或复选框Click事件将切换该特定CheckBox的状态。其他复选框的状态可以与此复选框同步（例如，通过使用"兄弟"属性）。希望这能有所帮助。

相关文章：