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

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

<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中实现这一点？任何帮助或指点都将不胜感激

这是我创作的小提琴：

多谢各位

使用

：复选框

选择器选择输入类型

复选框

元素

试试这个：

$（':checkbox'）。在（'change'，function（）上{
$（this.closest（'tr'）.find（'：checkbox'）.prop（'checked'，this.checked））；
});
表格，
th，
运输署{
边框：1px纯黑；
边界塌陷：塌陷；
}

史密斯
杰克逊
一种可能的
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>

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

在jQuery中编码的该功能的另一个变体可以在在线测验引擎（）中找到，该引擎通过以下代码段实现：

// 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'));
    }
});

在这种情况下，
行
单击
（在
行
的任何位置）或复选框
单击
事件将切换该特定
复选框的状态。其他复选框的状态可以与此复选框同步（例如，通过使用“兄弟”属性）。
希望这能有所帮助。
@RayonDabre我想用JavaScript来完成它。当然，jQuery应该很棒。您可以看看这个Javascript解决方案，并根据您的目的修改行的onClick事件：棒极了。我根本没想到最近的！那是一个奇妙的回答！谢谢！我想知道如何用JavaScript实现它！有什么建议吗？哇。非常感谢@rayondabreein除了传递“：checkbox”或type=“checkbox”之外，我们能给输入类型一个id并实现同样的功能吗？我试过了，但没用！当您谈论
id
时，它们必须是唯一的。。这就是为什么在处理
n
相同类型的元素数量时不应使用
id
。。是的，这是可能的，但是为什么你真的需要它呢？是的。你可以处理
类
谢谢你，亚历克斯。你的代码工作得很好。但我认为有一个小问题，在第一列中，单击在行上起作用，但在复选框上不起作用。如果我在列的空白处单击，复选框将被选中。如果我尝试单击复选框，则复选框不会被选中。但是到了最后一列，点击复选框是有效的！怪怪：不客气。这只是一个演示示例，可以使用我描述的核心编码技术进一步定制（请参阅我的扩展答案）。顺致敬意，
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
}

// 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'));
    }
});