Question

我有一个有点工作的datagrid版本，其中有2列复选框，第二列标题中有1个SelectAll复选框。现在的问题是，当我单击SelectAll时，它将选中/取消选中数据网格中的所有复选框。

我只希望SelectAll复选框选中/取消选中它所在的列。有人可以帮我吗？谢谢！

JavaScript

function SelectAllCheckboxesSpecific(spanChk) {
    var IsChecked = spanChk.checked;
    var Chk = spanChk;
    Parent = document.getElementById('dgPicsUploaded');
    var items = Parent.getElementsByTagName('input');
    for (i = 0; i < items.length; i++) {
        if (items[i].id != Chk && items[i].type == "checkbox") {
            if (items[i].checked != IsChecked) {
                items[i].click();
            }
        }
    }
}

DataGrid

<asp:TemplateColumn>
    <ItemStyle Wrap="true" Width="50px" />
    <HeaderTemplate>
        <asp:Button ID="btnSaveItemID" runat="server" Text="Save Item ID" OnClick="btnSaveItemID_Click" />
    </HeaderTemplate>
    <ItemTemplate>
        <asp:CheckBox ID="select2" runat="server" Checked="false"></asp:CheckBox>
    </ItemTemplate>
</asp:TemplateColumn>
...............
<asp:TemplateColumn>
    <ItemStyle Wrap="true" Width="30px" />
    <HeaderTemplate>
        <asp:CheckBox ID="chkbxSelectAll" Text="Select All" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);"></asp:CheckBox>
    </HeaderTemplate>
    <ItemTemplate>
        <asp:CheckBox ID="select" runat="server" Checked="false"></asp:CheckBox>
    </ItemTemplate>
</asp:TemplateColumn>

Answer 1

如果“全选”复选框与其适用的复选框位于同一列中，则可以获取其父单元格的 cellIndex ，然后使用它来查找并选中同一列。选择器可能会完成这项工作，如果不是在相关行上循环，则会在row.cells[index]复选框中获得该复选框。

请注意， cellIndex 是从零开始的，但是 nth-child 从1开始，因此您需要在索引中添加1。

// Get nearest ancestor with tagName at or above node
function getNearest(tagName, node) {
  tagName = tagName.toLowerCase();
  while (node && node.tagName && node.tagName.toLowerCase() != tagName) {
    node = node.parentNode;
  }
  return node && node.tagName && node.tagName.toLowerCase() == tagName? node : null;
}

function checkAllInCol(evt) {
  var node = this;
  var cell = getNearest('th', node);
  if (!cell) return;
  var selector = `td:nth-child(${cell.cellIndex+1})`;
  var table = getNearest('table', cell);
  table.tBodies[0].querySelectorAll(selector).forEach(
    cell => cell.querySelector('input').checked = node.checked
  );
}

window.onload = function() {
  var cells = document.querySelectorAll('th input').forEach(cell => {
    cell.addEventListener('click', checkAllInCol, false);
  });
}

table {
  border-collapse: collapse;
  border-left: 1px solid #bbbbbb;
  border-top: 1px solid #bbbbbb;
}
th, td {
  border-right: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
  text-align: right;
}

<table>
  <thead>
    <tr><th><label>Col 0: <input type="checkbox"></label>
        <th><label>Col 1: <input type="checkbox"></label>
  </thead>
  <tbody>
    <tr><td><input type="checkbox"><td><input type="checkbox"> 
    <tr><td><input type="checkbox"><td><input type="checkbox"> 
    <tr><td><input type="checkbox"><td><input type="checkbox">
  </tbody>
</table>

您应该添加错误检查和验证，例如确保cell.querySelector('input')返回一个节点，然后再分配给它的 checked 属性。

SelectAll复选框仅检查特定列

1 个答案: