Question

这是一个非常直截了当的问题，但我无法找到答案。

是否可以使用JavaScript和HTML执行此类操作？因此，顺序下面的复选框名称将是1,2,3,4

<input type="checkbox" name=counter()>
<input type="checkbox" name=counter()>
<input type="checkbox" name=counter()>
<input type="checkbox" name=counter()>

function counter() {
  i++;
  return i;
}

Answer 1

不，但是以不同的方式是的。不要包含name属性（或将值设置为""），并将此代码放在复选框后面：

<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>

DEMO： http://jsfiddle.net/bLRLA/

复选框的名称将采用“复选框＃”格式。这开始从0开始计数。如果你想用1开始名字（就像你说的那样），使用cur.name = "checkbox" + i + 1;。

获取复选框的另一个选项是：

var chx = document.querySelectorAll('input[type="checkbox"]');

这样，您就不必检查.type循环中的for。

在任何一种情况下，最好不要使用document，而是使用这些元素的更具体的容器，以便不会所有复选框被定位/修改...除非这正是你想要的。

在演示中，我添加了额外的代码，以便当您点击复选框时，它会alert name，只是为了证明它已正确设置。显然，对于你需要的代码，这个代码并不是必需的....只是上面的代码。

此代码可以在复选框之后，<body>末尾或window.onload中立即运行。

Answer 2

您可以在页面上获得所有input的{{3}}，然后循环浏览它们，将循环index添加到您想要的那些公共nodeList拥有type "checkbox"。在下面的示例中，我使用name string和Array.forEach将数组像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;
    }
});

on Function.call

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

Answer 3

因为您最有可能处理表单服务器端。你可能不会打扰改变表单标记客户端。例如，简单地将表单标记更改为以下内容就可以解决问题：

<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'] ); 
}
?>

Answer 4

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

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

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

4 个答案: