使用 Javascript 更改单选按钮名称答案

【问题标题】：Changing radio buttons name using Javascript使用 Javascript 更改单选按钮名称
【发布时间】：2012-07-11 18:03:18
【问题描述】：

我正在使用一个简单的 JS 复制函数来复制一个 div。里面是带有单选按钮的表单信息，包括一组称为“getOrRequest”的组。每个 div 代表一本书，需要有自己的“getOrRequest”值。

需要更改名称以使每个重复的单选按钮组都可选择而不影响其他所有单选按钮。更改这些值的最佳方法是什么？

这是我复制 div 的方式，以防出现问题。

var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
bookInfo.appendChild(copyDiv);

然后我尝试了几种更改名称值的方法。像这样：

bookInfo.copyDiv.getOrRequest_0.setAttribute("name", "'getOrRequest' + idNumber + '[]'");
bookInfo.copyDiv.getOrRequest_1.setAttribute("name", "'getOrRequest' + idNumber + '[]'");

还有这个：

bookInfo.copyDiv.getOrRequest_0.name = 'getOrRequest' + idNumber + '[]';
bookInfo.copyDiv.getOrRequest_1.name = 'getOrRequest' + idNumber + '[]';

getOrRequest_0 和 getOrRequest_1 是输入值的 ID，但我现在已经尝试了几种方法，但似乎没有任何效果。提前致谢！

编辑：更多信息

这是我正在使用的具体代码：

function addAnotherPost(){

var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
var size = copyDiv.childNodes.length;

copyDiv.id = 'addListing' + idNumber;

for(var j = 0; j < size; j++){
   if(copyDiv.childNodes[j].name === "getOrRequest[]"){
      copyDiv.childNodes[j].name = "getOrRequest" + idNumber + "[]";
   }
}

bookInfo.appendChild(copyDiv);

idNumber++;
}

而且它似乎不起作用.. div 重复，但名称值没有改变。

【问题讨论】：

标签： javascript forms radio-button

【解决方案1】：

你可以试试这个 - http://jsfiddle.net/ZKHF3/

    <div id="bookInformation">
        <div id="addListing">
            <input type="radio" name="addListing0[]" />
            <input type="radio" name="addListing0[]" />
        </div>
    </div>
    <button id="button">Add Listing</button>

    <script>
    document.getElementById("button").addEventListener("click", AddListing, false);

    var i = 1;
    var bookInfo = document.getElementById('bookInformation');

    function AddListing() {
        var copyDiv = document.getElementById('addListing').cloneNode(true);
        var size    = copyDiv.childNodes.length;

        copyDiv.id = "listing" + i;
        for ( var j = 0; j < size; j++ ) {
            if ( copyDiv.childNodes[j].nodeName.toLowerCase() == 'input' ) {
                copyDiv.childNodes[j].name = "addListing" + i + "[]";
            }
        }

        bookInfo.appendChild(copyDiv);
        i++;
    }
    </script>

【讨论】：

我在我的问题中添加了更多信息。您的示例帮助很大，但我只是不知道该怎么做。
你能用你的相关 HTML/JS 更新我的小提琴吗？所以我可以看看有什么问题
刚刚做了，非常感谢您的帮助。我只放了一部分，所以它不起作用但希望你能明白。
add listing 功能是否如您所愿？你能告诉我点击add another book时会发生什么吗？
div复制有效，新的div编号正确（第一个是addListing，第二个是addlisting1等）。然而，新 div 中的单选按钮并没有改变。单击“添加另一本书”时，即完成了复制和更改。

【解决方案2】：

问题是您正在寻找 div 的子节点，但复选框不是子节点，它们是后代节点。您要查找的节点嵌套在标签中。更新您的代码以使用 copyDiv.getElementsByTagName("input") 查找所有后代输入：

var idNumber = 0;
function addAnotherPost() {
    var bookInfo = document.getElementById('bookInformation');
    var copyDiv = document.getElementById('addListing').cloneNode(true);
    copyDiv.id = 'addListing' + idNumber;

    var inputs = copyDiv.getElementsByTagName("input");
    for(var j = 0; j < inputs.length; j++){
       if(inputs[j].name === "getOrRequest[]"){
          inputs[j].name = "getOrRequest" + idNumber + "[]";
       }
    }

    bookInfo.appendChild(copyDiv);
    idNumber++;
}

http://jsfiddle.net/gilly3/U5nsa/

【讨论】：