我在表格内构建全选复选框时遇到了一些问题。最初表格有几行，第一个复选框应该用于选择所有选项。
我构建了一个小示例，但仍然无法找出我的错误。
<!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>
在调试期间，id="all-AP"的 div 被检索但似乎是空的。我希望它包含三个 td 元素。
分隔 td 的 div 是否有效？我应该修复什么？
您也不需要 div 来执行“全选”。
看看这个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;
}
}
代码检索 table元素的 id。然后它得到它所有的 <input type="checkbox">元素。根据您的需要，您也可以通过他们的 id 来捕捉他们用[Regexp][2].test()方法(这里它捕获 id 以 "AP_" 开头的元素)。
这只是一个示例实现。您可以通过多种方式实现它。
个人中心
文章发布
退出
4
我是一名优秀的程序员,十分优秀！