Question

我在表格中构建全选复选框时遇到了一些麻烦。最初该表有几行，第一个复选框应该用于选择所有选项。

我建立了一个小例子，但仍然无法弄清楚我的错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "httpd://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script language="JavaScript">
function allClicked(clickedId)
{
  var divId = "div-" + clickedId.substring(4);
  var child = document.getElementById( divId );
  var tdChildren = child.getElementsByTagName("td"); // appears to be empty
  var allCheckBox = document.getElementById( clickedId );
  var setTo = allCheckBox.checked ? true : false;
  for (var i=0; i<tdChildren.length; ++i) {
    tdChildren[i].elements.checked = setTo;
  }
}
</script>
</head><body>
<div id="div-a">
  <table>
    <tr>
      <td><input id="all-AP" onClick="javascript:allClicked('all-AP')" type="checkbox">Select All</td>
      <div id="div-AP">
      <td><input id="AP_A1K" checked="checked" type="checkbox"></td>
      <td><input id="AP_A2K" checked="checked" type="checkbox"></td>
      <td><input id="AP_A3K" type="checkbox"></td>
      </div>
    </tr>
  </table>
</div>
</body></html>

在调试div时，id =＆＃34; all-AP＆＃34;被检索但似乎是空的。我预计它会有三个td元素。

分隔td＆div的div是否有效？我该怎么办？

Answer 1

不，不是。您可以将另一个表放在第二个单元格内，或者使用一些javascript来隐藏/显示其他单元格。

Answer 2

您不需要div来执行＆＃34;全选＆＃34;。

查看此fiddle。

第一：

<body>
    <table id="checkboxtable">
        <tr>
            <td>
                <input onClick="javascript:allClicked()" type="checkbox" />Select All</td>
            <td>
                <input id="AP_A1K" checked="checked" type="checkbox" />
            </td>
            <td>
                <input id="AP_A2K" checked="checked" type="checkbox" />
            </td>
            <td>
                <input id="AP_A3K" type="checkbox" />
            </td>
        </tr>
    </table>
</body>

每个输入都有自己的id（你不能将一个id影响到多个元素）。

然后allClicked（）：

function allClicked() {
    var checkBoxTable = document.getElementById("checkboxtable");
    var checkBoxes = checkBoxTable.getElementsByTagName("input");
    for (var i = 0; i < checkBoxes.length; ++i) {
        // if (/^AP_.*/.test(checkBoxes[i].id)) // getting them by regular expression
        if (checkBoxes[i].getAttribute("type") == "checkbox") // getting them by type
            checkBoxes[i].checked = true;
    }
}

代码通过其id检索table元素。然后它获取所有<input type="checkbox">个元素。根据您的需要，您还可以使用id方法通过[Regexp][2].test()方法捕获它们（此处它会捕获以"AP_"开头的元素。）

这只是一个示例实现。你可以通过多种方式实现它。

Answer 3

我的最终结果和工作示例如下所示：

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8" />
<title>Testpage</title>
<script type="text/javascript">
function allClicked(clickedId)
{
  var divId = "div-" + clickedId.substring(4);
  var child = document.getElementById( divId );
  var children = child.getElementsByClassName("AP");
  var allCheckBox = document.getElementById( clickedId );
  var setTo = allCheckBox.checked ? true : false;
  for (var i=0; i<children.length; ++i) {
    children[i].checked = setTo;
  }
}
</script>
</head><body>
  <table>
    <tr id="div-AP">
      <td><input id="all-AP" onClick="javascript:allClicked('all-AP')" type="checkbox">Select All</td>
      <td><input class="AP" checked="checked" type="checkbox"></td>
      <td><input class="AP" checked="checked" type="checkbox"></td>
      <td><input class="AP" type="checkbox"></td>
    </tr>
  </table>
</body></html>

我使用验证器检查文档。（http://validator.w3.org/check）

使用类功能允许我将select all放在同一行中。

Answer 4

div不能跨表格元素工作。请尝试使用allClicked函数：

function allClicked(clickedId)
{
  var prefix = clickedId.substring(4);
  var allCheckBox = document.getElementById( clickedId );
  var setTo = allCheckBox.checked ? true : false;
  var checkboxes = document.getElementsByTagName("input");
  for (var i=0; i<checkboxes.length; ++i) {
      var boxid = checkboxes[i].id;
      if (boxid.indexOf(prefix)===0) {
          checkboxes[i].checked = setTo;
      }
  }
}

这假设您的复选框分组具有公共前缀。只需从表格中完全删除div行，然后依赖input字段的ID前缀。

在<div>里面有效吗？选择表行<table> </table> </div>中的所有选项

4 个答案: