如何通过复选框选中属性对表格进行排序答案

【问题标题】：How to sort table by checkbox checked attribute如何通过复选框选中属性对表格进行排序
【发布时间】：2017-08-28 17:55:40
【问题描述】：

我是 javascript 新手，但我遇到了一段时间无法解决的问题... 我需要即时对表格进行排序。（借用的）代码是：

function sortTable(n) {
      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
      table = document.getElementById("myTable2");
      switching = true;
      dir = "asc"; 

      while (switching) {

        switching = false;
        rows = table.getElementsByTagName("TR");
        for (i = 1; i < (rows.length - 1); i++) {
          shouldSwitch = false;
          x = rows[i].getElementsByTagName("TD")[n];
          y = rows[i + 1].getElementsByTagName("TD")[n];

          if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
              shouldSwitch= true;
              break;
            }
          } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
              shouldSwitch= true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          switchcount ++; 
        } else {
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
    }

它适用于文本/数值，但问题是表中的一列包含复选框。想法是按照带有选中复选框的行在顶部（/底部，取决于升序/降序方向）的方式对表格进行排序。

我尝试检查 x.innerHTML.checked==true，但 x.innerHTML.checked 返回“未定义”，因此没有任何用处。

有什么建议吗？

【问题讨论】：

Get the value of checked checkbox?的可能重复

标签： javascript html checkbox

【解决方案1】：

使用纯原生 javascript，您的 for 循环应该如下所示：

for (i = 1; i < (rows.length - 1); i++) {
    shouldSwitch = false;
    x = rows[i].getElementsByTagName("TD")[n];
    y = rows[i + 1].getElementsByTagName("TD")[n];

    if (dir == "asc") {
        if(x.querySelector("input[type=checkbox]") !== null) { // checkbox case
            shouldSwitch = (x.querySelector("input[type=checkbox]").checked > y.querySelector("input[type=checkbox]").checked);
        } else {
            shouldSwitch= x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase();
        }

    } else if (dir == "desc") {
        if(x.querySelector("input[type=checkbox]") !== null) {
            shouldSwitch = (x.querySelector("input[type=checkbox]").checked < y.querySelector("input[type=checkbox]").checked);
        } else {
            shouldSwitch= x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase();
        }

    }
    if (shouldSwitch) {
        break;
    }
}

使用 x.querySelector("input[type=checkbox]")，您可以在之前选择的 TD 元素中查找一个复选框，并将其放入变量 x。

x 是一个节点对象，是网页 DOM 的一个元素。

querySelector 返回一个节点对象，而不是返回简单文本的 innerHTML。在简单的文本中，您无法轻松验证您的复选框是否已选中。

【讨论】：

非常感谢，成功了！
很高兴看到它有帮助，如果您认为正确，可以将此答案标记为正确答案。

【解决方案2】：

如果 x 是复选框类型的 DOM 元素，则只需执行 x.checked 即可访问复选框的布尔值。

例如：

document.getElementById('mycheckbox').checked;
// will return true or false

&lt;input id="mycheckbox" type="checkbox"&gt;

【讨论】：