0 

$("#add_driver").click(function() {
  $("#add_driver_section").replaceWith("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='radio1' type='radio' name='type- product[]' value='male' checked='checked' > <label class='label-radio100' for='radio1'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='radio2' type='radio' name='type-product[]' value='female'> <label class='label-radio100' for='radio2'> Female </label> </div></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
  <span class="label-input100">Gender</span>
  <div class="contact100-form-radio m-t-15">
    <input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
    <label class="label-radio100" for="radio1">
      Male
    </label>
  </div>

  <div class="contact100-form-radio">
    <input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
    <label class="label-radio100" for="radio2">
      Female
    </label>
  </div>
</div>

id每次调用此函数时，我都需要更改单选按钮的。

动态创建复选框的次数不计其数。我不想要一个非常复杂的代码。只是简单易懂的东西。

4

2 回答 2

0

只需在 js 中添加一些计数器并将其用作id

var count = 3;

$("#add_driver").click(function() {
  $("#add_driver_section").append("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='radio" + count + "' type='radio' name='type-product[]' value='male' checked='checked' > <label class='label-radio100' for='radio" + count + "'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='radio" + ++count + "' type='radio' name='type-product[]' value='female'> <label class='label-radio100' for='radio" + count + "'> Female </label> </div></div>");
  count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
  <span class="label-input100">Gender</span>
  <div class="contact100-form-radio m-t-15">
    <input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
    <label class="label-radio100" for="radio1">
      Male
    </label>
  </div>

  <div class="contact100-form-radio">
    <input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
    <label class="label-radio100" for="radio2">
      Female
    </label>
  </div>
</div>

<button id="add_driver">Add driver</button>

<section id="add_driver_section"></section>

我希望这是您想要实现的目标。如果没有，请告诉我。

编辑

如果您不希望这些单选按钮充当一个单选集，则需要为它们指定不同的编号。

这是一个例子

var count = 3;

$("#add_driver").click(function() {
  $("#add_driver_section").append("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='male-radio" + count + "' type='radio' name='type-product-" + count + "[]' value='male' checked='checked' > <label class='label-radio100' for='male-radio" + count + "'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='female-radio" + count + "' type='radio' name='type-product-" + count + "[]' value='female'> <label class='label-radio100' for='female-radio" + count + "'> Female </label> </div></div>");
  count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
  <span class="label-input100">Gender</span>
  <div class="contact100-form-radio m-t-15">
    <input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
    <label class="label-radio100" for="radio1">
      Male
    </label>
  </div>

  <div class="contact100-form-radio">
    <input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
    <label class="label-radio100" for="radio2">
      Female
    </label>
  </div>
</div>

<button id="add_driver">Add driver</button>

<section id="add_driver_section"></section>

于 2018-06-20T06:50:02.670 回答
0 

$(document).ready(function(){
var i = 0;
$("#add_driver").click(function() {
  i = i + 1;
  $("#add_driver_section").append("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='male-radio"+i+"' type='radio' name='type-product-"+i+"[]' value='male' checked='checked' > <label class='label-radio100' for='male-radio"+i+"'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='female-radio"+i+"' type='radio' name='type-product-"+i+"[]' value='female'> <label class='label-radio100' for='female-radio"+i+"'> Female </label> </div></div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
  <span class="label-input100">Gender</span>
  <div class="contact100-form-radio m-t-15">
    <input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
    <label class="label-radio100" for="radio1">
      Male
    </label>
  </div>

  <div class="contact100-form-radio">
    <input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
    <label class="label-radio100" for="radio2">
      Female
    </label>
  </div>
</div>
<div id="add_driver_section"></div>
<button id="add_driver">Add</button>

也许你想要这样的东西？您还需要提供唯一的名称以允许选择每个驱动程序。否则它将更新先前选择的单选按钮。请让我知道这对你有没有用？

于 2018-06-20T07:07:15.740 回答