CODEWITHSUNDEEP
javascriptjqueryjquery-ui
The Rock
The Rock

Reputation: 413

Clone tr and checkbox event in jQuery

I have to clone my <tr> and I have list of checkbox like code below and when I add new row with list of checkbox and then I click on check box to show value in textbox field_resultsthe value not show only on first textbox not yet clone. How when I add new tr and then when I click on which list of checkbox in which tr they will show value of my click in the same tr.

$("#add-new").on("click", function () {                          
    $tr = $(this).closest("tr").next().clone(true);
    $tr.insertAfter($(this).closest("tr"));
});

$(document).ready(function () {
  $checks = $('#mych_box :checkbox');
  $checks.on('change', function () {
    var string = $checks.filter(":checked").map(function (i, v) {
      return this.value;
    }).get().join(",");
    console.log(string);
    $('#field_results').val(string);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td>
       <button type="button" id="add-new">Add New</button>
    </td>
</tr>
<tr>
  <td>
    <input type="text" id="field_results" name="field_results[]"/><br>
    <div class="multiselect" style="height: 100px;width: auto;" id="mych_box">
        <label>
          <input type="checkbox" id="virt_software_chb1" name="virt_software[]" value="White"/>White
          <input type="checkbox" id="virt_software_chb2" name="virt_software[]" value="Red"/>Red
          <input type="checkbox" id="virt_software_chb3" name="virt_software[]" value="Blue"/>Blue
        </label>
    </div>
  </td> 
</tr>

Upvotes: 1

Views: 381

Answers (2)

RonyLoud
RonyLoud

Reputation: 2436

As defined above use true in clone to bind default events and use class instead of id to group element

        $(".virt_software_chb").on('change', function () {
            var string = $(this).closest('td').find('.virt_software_chb').filter(":checked").map(function (i, v) {
                return this.value;
            }).get().join(",");
            $(this).closest('td').find('.field_results').val(string);
        });
        
$("#add-new").on("click", function () {                          
    $tr = $(this).closest("tr").next().clone(true);
    $tr.insertAfter($(this).closest("tr"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td>
       <button type="button" id="add-new">Add New</button>
    </td>
</tr>
<tr>
  <td>
    <input type="text" class="field_results" name="field_results[]"/><br>
    <div class="multiselect" style="height: 100px;width: auto;" id="mych_box">
        <label>
          <input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White
          <input type="checkbox" class="virt_software_chb" name="virt_software[]" value="Red"/>Red
          <input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White
        </label>
    </div>
  </td> 
</tr>
</table>

Upvotes: 2

Carl Edwards
Carl Edwards

Reputation: 14444

withDataAndEvents (default: false)

A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well. - clone()

Try passing in true and see what you get.

$tr = $(this).closest("tr").next().clone(true);

Upvotes: 2

Related Questions