單擊同一行中的任何復選框時，選中/取消選中表格行中的復選框

Question

我有一個簡單的表，如下所示，每行的第一列和最后一列都有復選框。

<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中實現這一點？ 任何幫助或指示將非常感激。

這是我創造的小提琴 ： 小提琴

謝謝。

Answer 1

使用: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> 

Answer 2

在表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中編碼的此功能的另一種變體可以在在線pop-quiz引擎（ 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 。 其他CheckBoxes的狀態可以與此同步（例如，使用“siblings”屬性）。 希望這可能有所幫助。