Question

$("#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。

不计算复选框将动态创建多少次。我不需要非常复杂的代码。只是一些简单易懂的东西。

Answer 1

只需在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>

Answer 2

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

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

动态更改任何标签的id属性无数次

2 个答案: