可以用javascript更改输入标签的名称吗？答案

【问题标题】：can the name of a input tag be changed with javascript?可以用javascript更改输入标签的名称吗？
【发布时间】：2009-08-24 20:28:32
【问题描述】：

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

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

当用户选择此单选按钮时，我想更改 some_name 的值。

我想这样做的原因在这里描述：How might I calculate the sum of radio button values using jQuery?

【问题讨论】：

请注意：如果您更改一个单选按钮的名称，您应该更改所有单选按钮的名称，否则您最终可能会同时提交两个名称（而且很可能也与浏览器用户界面有关）。到目前为止给出的所有 jQuery 示例都将为您执行此操作。

标签： javascript jquery html

【解决方案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 来做这件事要容易得多。

【讨论】：

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

【解决方案2】：

jQuery 方式

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

Gumbo 涵盖了原生 JavaScript 方式

【讨论】：

【解决方案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');
});

【讨论】：

关于您的编辑：更改单个单选按钮的名称可能是个坏主意，除非没有其他单选按钮共享该名称（在这种情况下，他真的应该使用复选框） .
@shog9：谢谢你指出这一点，我发帖的时候没想到。我对其进行了更新，因此它会更改名称为 some_name 的所有输入，而不仅仅是单击的那个。
@shog9：再次感谢，jQuery 不是我的主要框架，所以我总是把一些语法弄混。
嘿，引号是个好主意，但我的意思是，最后一个选择器将选择您打算给它们的名称的按钮（选择名称=some_name的按钮，将名称更改为some_name)！

【解决方案4】：

当然。如果 jQuery 是你的毒药，这应该可以解决问题：

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

【讨论】：

并没有真正为 Russ 或 tj111 的答案添加任何内容。
对不起。我在别人之前回答，不知道他们会回答什么。期待您的更多建设性批评！

【解决方案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>

【讨论】：

这将只更改组中单个单选按钮的名称；这可能是他想要的，但我无法想象为什么。看我上面的cmets...

【解决方案6】：

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

处理此问题的最佳方法是用新的单选按钮替换旧的单选按钮。 This post 可以帮助你。如果您使用的是 jQuery，则可以使用 replaceWith 函数。

More information about changing name attributes in IE.

【讨论】：