使用JavaScript可以更改输入标签的名称吗？

Question

我想知道是否可以使用JavaScript或jQuery更改输入标签的名称，例如在以下代码中：

<input type="radio" name="some_name" value="">

当用户选择这个单选按钮时，我想要改变some_name的值。

我之所以想要这样做，是因为在这里描述了原因：如何使用jQuery计算单选按钮值的总和？

- datisdesign

---

提醒一下：如果您更改一个单选按钮的名称，则应更改所有单选按钮的名称，否则可能会提交两个名称（并且这可能会影响浏览器界面）。 迄今为止给出的所有jQuery示例都将为您完成此操作。 - Shog9

Answer 1

只需使用elem.name = "some other name"或elem.setAttribute("name", "some other name")，其中elem是您想要更改的元素。

要在选择上执行此操作，请使用onchange事件：

<input type="radio" name="some_name" value="" onchange="if(this.selected) this.name='some other name'">

并将该行为应用于具有相同名称的每个单选按钮：

var inputElems = document.getElementsByTagName("input");
for (var i=inputElems.length-1; i>=0; --i) {
    var elem = inputElems[i];
    if ((elem.type || "").toLowerCase() == "radio" && elem.name == "some_name") {
        elem.onchange = function() {
            if (this.selected) {
                this.name = "some other name";
            }
        };
    }
}

但是使用jQuery来实现这一点会更加简单。

- Gumbo

---

只需使用您的代码...for循环应该是for (var i=inputElems.length-1; i>=0; --i) { - Jason Jong

Answer 2

jQuery的做法

$('input:radio[name="some_name"]').attr('name', 'new name');

Gumbo已经涵盖了使用原生JavaScript的方法。

- Russ Cam

Answer 3

是的，您可以使用JavaScript更改任何元素的名称。但请注意，IE 6和7在提交表单时可能会出现问题，其中输入元素已在JavaScript中进行了修改（不确定是否会影响此特定情况）。

$('input:radio[name="some_name"]').attr('name', 'new_name');

编辑：如果只有在选择时才更改它，这是相应的代码：

$("input:radio[name='some_name']").click(function() {
  if ($(this).attr('checked'))    $("input:radio[name='some_name']").attr('name', 'new_name');
  else                            $("input:radio[name='some_name']").attr('name', 'some_name');
});

- TJ L

---

关于您的编辑：更改单个单选按钮的名称可能是个不好的主意，除非没有其他使用相同名称的单选按钮（在这种情况下，他应该真的使用复选框）。 - Shog9

@shog9：感谢您指出这一点，在我发布时没有考虑到。我已经更新了它，使其更改所有名称为“some_name”的输入，而不仅仅是单击的那个。 - TJ L

@shog9: 再次感谢，jQuery 不是我主要的框架，所以我经常混淆一些语法。 - TJ L

嘿，引号是个好主意，但我想说的是，最后一个选择器会选择那些名称为你打算给它们的名字的按钮（选择名称为'some_name'的按钮，将名称更改为'some_name'）！ - Shog9

Answer 4

当然可以。如果你喜欢使用jQuery，那么这个应该能解决问题：

$("input[name=some_name]").attr("name", "other_name");

- Eugene Lazutkin

---

并没有为Russ或tj111的答案增添任何内容。 - Shog9

很抱歉，我在其他人之前回答了，所以不知道他们会怎么回答。期待更多您的建设性批评！ - Eugene Lazutkin

Answer 5

我想到了这个：

<input type="radio" name="some_name" value="" id="radios">

<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
    $("#radios").click(function()
    {
        $(this).attr("name", "other_name");
    });
});
</script>

- MrHus

---

这将更改单个单选按钮的名称，而不是整个组中的所有按钮；这可能是他想要的，但我无法想象为什么。请参见上面的我的评论... - Shog9

Answer 6

试图更改单选按钮的名称属性会导致IE中出现奇怪且不良的行为。

处理此问题的最佳方法是用新单选按钮替换旧单选按钮。此帖子可能会对您有所帮助。如果您正在使用jQuery，则可以使用replaceWith函数来完成。

有关在IE中更改名称属性的更多信息。

- Elias Zamaria