Question

我有一个带有一些单选按钮的div，输入名称是cty_1。如果我添加更多div，则div内的输入名称应分别变为cty_2，cty_3等。

这是我的代码：

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

Answer 1

试试这个：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();

Answer 2

如果你正在使用jQuery，那么这很容易。使用以下代码，每次点击＆＃34; Go＆＃34;将追加新的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>

使用javascript增加输入名称

2 个答案: