Question

我正在使用一个简单的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是重复的，但名称值没有变化。

Answer 1

问题是您正在寻找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/

Answer 2

你可以尝试这个 - 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>

使用Javascript更改单选按钮名称

2 个答案: