Javascript 使用计数器命名大量输入复选框

这是一个相当直截了当的问题，但我没能找到答案

可以用JavaScript和HTML做类似的事情吗？因此，下面的复选框的名称顺序将是1，2，3，4

函数计数器（）{
i++；
返回i；
}

否，但以另一种方式是。不要包含

名称

属性（或将值设置为

”

），并将此代码放在复选框后：

<script type="text/javascript">
    var chx = document.getElementsByTagName("input");
    for (var i = 0; i < chx.length; i++) {
        var cur = chx[i];
        if (cur.type === "checkbox") {
            cur.name = "checkbox" + i;
        }
    }
</script>

这样，您就不必在

for

循环中检查

.type

在这两种情况下，最好不要使用

document

，而是使用这些元素的一些更具体的容器，以便不是所有的复选框都是目标/修改的…除非这正是您想要的

在演示中，我添加了额外的代码，这样当您单击复选框时，它将发出

alert

its

name

，以证明它设置正确。这段代码显然不是你所需要的…只是上面的代码

此代码可以在复选框之后立即运行，在

的末尾或在

窗口中运行。onload

您可以在页面上获得所有

输入的一个列表，然后在它们之间循环添加循环
索引
到您想要的任何公共项，用于那些有
类型
复选框的用户

。在下面的示例中，我使用and将数组像nodeList一样视为数组，以简化循环

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

var inputs = document.getElementsByTagName("input");

Array.prototype.forEach.call(inputs, function (input, index) {
    if (input.type === "checkbox") {
        inputs.name = "box" + index;
    }
});

var inputs=document.getElementsByTagName（“输入”）；
Array.prototype.forEach.call（输入，函数（输入，索引）{
如果（input.type==“复选框”）{
inputs.name=“box”+索引；
}
});

在

---

最后，虽然已经尽可能地证明了这一点，但我认为你需要问自己一个问题：“我为什么要这样做？”。也许有更好的选择可供您选择。

因为您很可能正在处理表单服务器端。您可能不需要在客户端修改表单标记。例如，只需将表单标记更改为以下内容即可：

<input type="checkbox" value="One" name=counter[]>
<input type="checkbox" value="Two" name=counter[]>
<input type="checkbox" value="Tre" name=counter[]>
<input type="checkbox" value="For" name=counter[]>

然后，例如，使用PHP服务器端：

<?php 
if ( isset( $_REQUEST['counter'] ) ) {
    print_r( $_REQUEST['counter'] ); 
}
?>

---

我认为最好在代码中创建元素。在替换控件时添加一个脚本标记，并使用类似的方法（创建一个包含div的容器，我在下面的代码中指定了一个命名容器）

for（int i=0；i<4；i++）{
var el=document.createElement（'input'）；
el.setAttribute（'name'，'chk'+i.toString（））；
document.getElementById（'container'）.appendChild（el）；
}

这对您的尝试毫无意义。名称不能以数字开头，也不能是数字。可能吗？对明智的只有当复选框是动态创建的，在什么情况下你才知道如何增加计数器，所以，不。@deathApril-理论上他可以使用underline.js或jQuery对它们进行迭代，并以这种方式修改属性。@Barry Chapman-这让我深感悲哀，现在人们试图用臃肿的库做任何简单的事情。可以使用超级简单的JS代码进行迭代。@BarryChapman如果已知复选框列表，则应在创建HTML时指定名称（PHP/…或手动），或者您可以在窗口中包装它们。onload@BarryChapman非常正确。我只是觉得尽快做可能是“最好的”。而且，我的意思不一定是“在您的复选框之后立即”，所以这可能会出现在

的末尾。我仍然会在我的答案中添加这一点，但我想为什么他们“最有可能处理表单服务器端”？我没有看到表格。重点是如何首先生成名称，他们没有说任何关于以后处理的内容假设表单元素属于表单是合理的。当然，这是非常合理的，但这个问题与表单或复选框在服务器上的处理方式无关。它与生成名称有关。您所做的只是键入一个新名称。这将在将来用作php的表单，我一般都会问这个问题，但感谢您的回答，它为我提供了另一个选项。

<?php 
if ( isset( $_REQUEST['counter'] ) ) {
    print_r( $_REQUEST['counter'] ); 
}
?>

for(int i = 0; i < 4; i ++){
    var el = document.createElement('input');
    el.setAttribute('name', 'chk' + i.toString());
    document.getElementById('container').appendChild(el);
}