如何动态获取页面上显示的复选框的ID答案

【问题标题】：How to get the ids of the checkboxes which are displayed on the page dynamically如何动态获取页面上显示的复选框的ID
【发布时间】：2012-03-29 16:05:20
【问题描述】：

我有一个 jsp 页面，其中有一个 html 表。读取 xml 文件后，表格的内容将动态填充。根据 xml 文件中存在的某些数据，表中的行数可能从 2 到 10 不等。现在，在 html 表中显示的每一行中都有一个 复选框。 复选框的 id 也是动态命名的。现在，我必须编写一些 javascript 代码，这些代码依赖于显示的复选框的所有 id。如何动态将表格上显示的复选框的所有id传递给javascript代码？

PS：我正在考虑这种方法，如果我错了，请纠正我。声明一个空数组来保存复选框的 ID。当我使用 for 循环动态创建表的每一行时，我将复选框的 id 添加到数组中。现在，我想在 javascript 中使用这个数组。

是否可以在 javascript 中访问此数组？如果是这样，我如何将此数组传递给 javascript 块？将此javascript代码放置在jsp中的位置是否有任何限制（例如在将复选框的ID添加到数组中的代码块之后/之前）。我对这种东西比较陌生。请帮助实施这种方法

【问题讨论】：

使用 jQuery。然后，假设您在 id 为“container”的容器中有这些复选框；现在你只需要做：$('#container input[type=checkbox]')

标签： java javascript html jsp checkbox

【解决方案1】：

是的，与 mplungjan 的回答类似，您可以搜索元素类型，然后进一步挖掘以检索其中的复选框元素

因此，在您的情况下，通过 id （如果您给它一个 id）或 tagname（'table'[0] 如果它是第一个也是唯一的表）搜索您的表，在表中搜索复选框元素并将每个添加到您的数组中

var table   = document.getElementById('dataTable');
//OR if we assert there's only 1 table
//var table = document.getElementsByTagName('table')[0]; 
var tableInputTags = table.getElementsByTagName("input");
var checkboxArray= [];

for (var i=0; i<tableInputTags.length; i++) 
{
    if(tableInputTags[i].type=="checkbox") 
    {
        checkboxArray.push(tableInputTags[i].id);
    }
}
//continue doing something with the 
//array of dynamically created checkboxes...

【讨论】：

这种方法也不适用于 IE7 及以下版本。但这似乎是一种直截了当的方法。 if 条件中有一个小错字（我们使用 tableInputTags[i] 而不是 inputs[i]）

【解决方案2】：

如果我理解你有两种可能性。你可以

为服务器端for 循环上的每次迭代将复选框的ID 添加到javascript 数组中。因此，您需要在页面开头声明一个空的 js 数组，然后为每个复选框添加一个 script 块，在其中您将 id 推送到带有 <yourarray>.push("<yourid>") 的数组中。这个解决方案不是很高效（因为每个<script> 块都会停止渲染过程一段时间，并且你在几个地方“播种”了代码）但从技术上讲是有效的 - 否则

在 DOM ready（或 onload）事件中，您查看 input:checkbox DOM 集合，获取 id 并将其推送到数组中，就像这样。

var ids = [],
    cbx = document.querySelectorAll('input[type="checkbox"]');

for (i = 0, l = cbx.length; i < l; i++) {
       ids.push(cbx[i].id);
}

console.log(ids);

小提琴：http://jsfiddle.net/G44hH/1/ - 当然，如果可以，最好使用这个解决方案（而不是第一个）

【讨论】：

有趣的 queryselector 和 console - 我会说我的更安全，代码不多
是的，我绝对同意（即使自 IE8 起支持 querySelectorAll()）。这只是提出一种不同的方法。控制台仅用于调试目的

【解决方案3】：

假设页面加载后所有复选框都可用，您可以这样做（纯 javascript）：

var checks=[];
window.onload=function() {
  var inputs = document.getElemementsByTagName("input");
  for (var i=0, n=inputs.name;i<n;i++) {
    if (inputs[i].type=="checkbox") checks.push(inputs[i].id);
  }
}

【讨论】：

【解决方案4】：

假设您有一个 id 为 #table 的表，在 TRs 中有一些 TRs，您在 TD 中有复选框。你可以通过下面的 jquery 来完成：

$('#table tr').each(function() {
 alert($(this).find('input:checkbox').attr('id'));
});

但我想您不需要存储与特定 Td 相关的复选框 ID，您需要在其中执行删除编辑等操作。

如果你能清楚地说明你想做什么，我可以给你发正确的代码。

【讨论】：

【解决方案5】：

为所有复选框添加一个类属性，然后使用jquery按类选择这些复选框。

jquery 选择器将返回这些复选框的数组，然后您可以根据需要使用该数组。像这样。

<input type=checkbox class ="box"/>

var arr = [];

arr = $(".box");

【讨论】：