javascriptを使用して入力名を増やす

-5

いくつかのラジオボタンを持つdivがあり、入力名はcty_1です。 divを追加すると、div内の入力名はそれぞれcty_2、cty_3などになります。私はJavaScriptを知らない：別のdivが追加された場合、私はNB 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 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>

のようなことをしたい

<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>

：

は、ここに私のコードです。

出典

2017-01-06 Jaseel Bavu

をあなたのIDはまた、あなたがここに助けをすべきである尋ねる前 – epascarello

を変更する必要があります：新しいcategory要素が追加されますとnameとid属性が増加します、あなたは「GO」をクリックするたびに次のコードを使用して勉強に行き、助けを求めるのではなく、あなたが試したことを示す解決策を思いついてみてください。 http://www.w3schools.com/js/ - > javascript tutorial –

親をクローン（）し、要素を選択し、ID /名前を変更する必要があります。 – epascarello

これを試してください：あなたはjQueryのを使用している場合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が追加されると、自動的に変更されました。 –

あなたのコードは、ボタンが押されたときにのみ実行されると思います。もし私が間違っていたら、私を修正してください。 –

、これは非常に簡単です。うまく

<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が追加されたときにのみ、名前を変更する必要があります。 –

javascriptを使用して入力名を増やす

答えて

関連する問題