动态更改任何标签的id属性无数次 [英] dynamically changing id attribute of any tag for countless times

问题描述

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

I need to change the id of the radio button everytime this function is called.

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

There is no count to how many times the checkboxes will be dynamically created. I do not want a very complex code. Just something simple and easy to understand.

推荐答案

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

Just add some counter in js and use it as a number in 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>

我希望这是您要实现的目标.如果没有，请通知我.

I hope this is what you want to achieve. If not, then let me know.

编辑

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

If you want those radio buttons not to act as one radio set, then you need to give them different number.

以下是示例

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>

这篇关于动态更改任何标签的id属性无数次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！