使用javascript增加輸入名稱

-5

我有一個單選按鈕，輸入名稱爲cty_1。如果我添加更多的div，該div內的輸入名稱應分別成爲cty_2，cty_3等。使用javascript增加輸入名稱

這裏是我的代碼：

<div class="category"> 
     <div class="col-md-6"> 
      <input type="radio" name="cty_1" id="1" value="car"> 
      <label for="1">car</label> 
     </div> 
     <div class="col-md-6"> 
      <input type="radio" name="cty_1" id="2" value="bike"> 
      <label for="2">bike</label> 
     </div> 
    </div>

如果添加了另一個DIV的，我想，像

<div class="category"> 
     <div class="col-md-6"> 
      <input type="radio" name="cty_1" id="1" value="car"> 
      <label for="1">car</label> 
     </div> 
     <div class="col-md-6"> 
      <input type="radio" name="cty_1" id="2" value="bike"> 
      <label for="2">bike</label> 
     </div> 
    </div> 

<div class="category"> 
     <div class="col-md-6"> 
      <input type="radio" name="cty_2" id="3" value="phone"> 
      <label for="3">phone</label> 
     </div> 
     <div class="col-md-6"> 
      <input type="radio" name="cty_2" id="4" value="computer"> 
      <label for="4">computer</label> 
     </div> 
    </div>

NB：我不知道的JavaScript。

來源

2017-01-06 Jaseel Bavu

好你的ID也將需要改變 – epascarello

尋求幫助這裏你應該之前去學習，並嘗試提出一個解決方案，表明你已經嘗試過，而不是尋求幫助。 http://www.w3schools.com/js/ - > javascript教程 –

因此，您需要克隆（）父級，選擇元素並更改ID /名稱。 – epascarello

試試這個：updated fiddle

//Html 
<div id="divMain">  
</div> 

//jQuery Code 
var valuesArr=["car","bike","truck","Test4","Test5"]; 
var cityCounter=1; 
var idCounter=1; 
var addCategoryFlag=false; 
function CallHtml(){ 
    var html=""; 
    for(var i=0;i<valuesArr.length;i++){  
     if(idCounter%2!=0){ 
      html+='<div class="category">';   
     } 
     else{ 
      addCategoryFlag=true; 
     } 
     html+='<div class="col-md-6">'; 
     html+=' <input type="radio" name="cty_'+cityCounter+'" id="'+idCounter+'" value="'+valuesArr[i]+'">'; 
     html+=' <label for="'+idCounter+'">'+valuesArr[i]+'</label>'; 
     html+='</div>'; 
     if(addCategoryFlag){ 
       html+='</div>'; 
      addCategoryFlag=false; 
      cityCounter++; 
     } 
     idCounter++; 
    } 

    $("#divMain").html(html); 
} 

CallHtml();

來源

2017-01-06 16:34:19

感謝您的回覆。我不需要按鈕。如果我再添加div一次或兩次，等等。該名稱應該自動更改爲cty_2，cty_3，...我希望你明白。 –

你可以檢查它的小提琴。當新的div添加它會自動更改。 –

我想，你的代碼只有在按下按鈕時纔會執行。如果我錯了，請糾正我。 –

如果你使用jQuery，那麼這是很容易的。使用下面的代碼，每次點擊「開始」的新category元素將被追加和name和id屬性將遞增：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<body> 
    <div class="container"> 
    <btn class="btn btn-primary">Go</btn> 
    <div class="category"> 
     <div class="col-md-6"> 
      <input type="radio" name="cty_1" id="1" value="car"> 
      <label for="1">car</label> 
     </div> 
     <div class="col-md-6"> 
      <input type="radio" name="cty_1" id="2" value="bike"> 
      <label for="2">bike</label> 
     </div> 
    </div> 
    </div> 
</body> 

<script> 
$('.btn-primary').on('click',function(){ 
    var idx = parseInt($('.category').last().index())+1; 
    $('.category') 
    .last() 
    .clone() 
    .find('input[type=radio]') 
     .each(function(index){ 
     $(this) 
      .attr('name','cty_' + idx) 
      .attr('id','cty_' + idx + "_" + index) 
      .parent() 
      .find('label') 
       .attr('for','cty_' + idx + "_" + index) 
       .end() 
     }) 
     .end() 
    .insertAfter($('.category').last()); 
}); 
</script>

來源

2017-01-06 16:47:22

感謝您的回覆。但我不需要按鈕。新的類別元素是手動創建或通過查詢自動創建的。無關緊要。我只想在添加新div時更改名稱，id。 –

使用javascript增加輸入名稱

回答

相關問題