使用Javascript更改單選按鈕名稱

Question

我正在使用簡單的JS複製函數來複制div。裏面是帶有單選按鈕的表單信息，包括一個名爲'getOrRequest'的組。每個div代表一本書，並且需要有自己的'getOrRequest'值。

該名稱需要更改，以便每個重複的單選按鈕組都可選，而不會影響每個其他單選按鈕。改變這些價值的最好方法是什麼？

這是我如何複製股利，以防萬一這是問題。

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>