Clone and update attributes

2019-07-28 14:45发布

问题:

My first question here, but stackoverflow has been a highly valued resource for me the past year.

I am building an advanced form. I need the user to have the ability to add subgroups. I am using jquery (1.5.1 -- I suppose I should update.) to clone the object. My problem is I also need it to update attributes.

I was wondering if a way exists to do this that I am unable to find or if I should write this myself. It seems to be an easy task, make a count of the attributes and add one.

I have provided a terse example of some code.

<form class="clause">
  <input type="radio" id="radio-1" name="radio" checked="checked" />
    <label for="radio-1">And</label>
  <input type="radio" id="radio-2" name="radio" />
    <label for="radio-2">Or</label>
  <input type="radio" id="radio-3" name="radio" />
    <label for="radio-3">Not</label>
 <button class="ag">Add SubGroup</button>
</form>


<!-- yes, this is in an external file -->
<script type="text/javascript">

$(function() {
  $('.ag').click(function() {
$('.clause').clone(true).insertAfter($('.clause:last'));
 });
</script>

This duplicates, quite nicely, the form and inserts a copy after itself.

obviously, the radio buttons attributes are not updated. So if a radio button is ticked in one sub-group it is applied to them all. I do not want this to happen.

Does a function exist for this? This is no trouble if there is none, but I am trying to not reinvent any wheels in this project.

EDIT:

To illustrate this question better I have supplied more code below. Detailing my desired results

<form class="clause">
      <input type="radio" id="radio-1" name="radio" checked="checked" />
        <label for="radio-1">And</label>
      <input type="radio" id="radio-2" name="radio" />
        <label for="radio-2">Or</label>
      <input type="radio" id="radio-3" name="radio" />
        <label for="radio-3">Not</label>
      <button class="ag">Add SubGroup</button>
   </form>
   <form class="clause">
      <input type="radio" id="radio-4" name="radio" checked="checked" />
        <label for="radio-4">And</label>
      <input type="radio" id="radio-5" name="radio" />
        <label for="radio-5">Or</label>
      <input type="radio" id="radio-6" name="radio" />
        <label for="radio-6">Not</label>
      <button class="ag">Add SubGroup</button>
   </form>

   <!-- yes, this is in an external file -->
   <script type="text/javascript">
    $(function() {
      $('.ag').click(function() {
    $('.clause:last').clone(true).insertAfter($('.clause:last'));
     });
    </script>

(note: This is a highly scaled down version of what I am attempting, and forgive me if I scaled it appropriately.)

Thanks, Matt

回答1:

$('.ag').click(function() {
  // I would advise using :last so you don't exponentially grow your form
  var clone = $('.clause:last').clone(true);

  // now find all the radios and reset them
  $('input[type=radio]',clone).removeAttr('checked');

  // now add it
  clone.insertAfter($('.clause:last'));
});

Use the second argument of the selector (Scope) and search within your clone to reset fields/attributes before appending it.