0

这是一个非常简单的问题，但我无法找到答案。

有可能用 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;
}
4

4 回答 4

4

不，但是以不同的方式是的。不要包含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>

演示：http: //jsfiddle.net/bLRLA/

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

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

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

有了这个，您不必检查循环.type内部。for

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

在演示中，我添加了额外的代码，以便当您单击复选框时，它会显示alert为name，只是为了证明它设置正确。该代码显然不是您所需要的……只是上面的代码。

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

于 2013-04-24T20:33:16.717 回答
2

您可以在页面上获取所有s 的nodeListinput ，然后循环遍历它们，将循环添加到您想要的index任何通用名称字符串type中"checkbox"。在下面的示例中，我使用了 Array.forEach和Function.call将像 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;
    }
});

在jsfiddle上

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

于 2013-04-24T20:35:26.170 回答
1

因为您很可能正在处理表单服务器端。您可能不会费心更改表单标记客户端。例如，简单地将表单标记更改为以下内容即可：

<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'] ); 
}
?>
于 2013-04-24T20:40:41.937 回答
0

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

for(int i = 0; i < 4; i ++){
    var el = document.createElement('input');
    el.setAttribute('name', 'chk' + i.toString());
    document.getElementById('container').appendChild(el);
}
于 2013-04-24T20:45:15.087 回答