Display checked box value with multiple div

Question

My code is display checked box value all input field in added more reply div.

But I want it to display in input field on current div that I used.

This is my demo.

<div class="reply-box" style="margin: 0 auto;">
  <div class="controls"> 
    <div style="margin-bottom: 20px;" class="entry input-group">
      <textarea class="form-control newreply" name="reply[]" type="text" placeholder="Add Reply"></textarea>
      <span class="input-group-btn">
        <button class="btn btn-success btn-add" type="button">
          <span class="glyphicon glyphicon-plus">Add more reply</span>
        </button>
      </span>
      <br>
      <div class="checkbox-type1">
        One <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="1">         
        Two <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="2">
        Three<input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="3">
        <input type="text" value="" name="getID_type1[]" class="getID_type1">
      </div>
    </div>
  </div>
</div>

jQuery

$(function() {
    $(document).on('click', '.btn-add', function(e)
    {
        e.preventDefault();

        var controlForm = $('.controls'),
            currentEntry = $(this).parents('.entry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('textarea').val('');
        controlForm.find('.entry:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<span class="glyphicon glyphicon-minus">Remove</span>');
    }).on('click', '.btn-remove', function(e)
    {
        $(this).parents('.entry:first').remove();

        e.preventDefault();
        return false;
    });
});

$(".checkbox-type1 > .to_char_id_type1").change(function () {
    var newArr = $(".to_char_id_type1:checked").map(function () { return this.value; });
    $(".getID_type1").val(newArr.get().join(","));
});

Thanks in advance.

score 1 · Answer 1 · answered May 27 '16 at 03:22

You've got two problems:

You need to use event delegation to handle the change events for the dynamically added items.
In the change event, you can't just search for those classes, but instead need to search children of the current element's parent.

Here's a working example:

$(function() {
  $(document).on('click', '.btn-add', function(e)
                 {
    e.preventDefault();

    var controlForm = $('.controls'),
        currentEntry = $(this).parents('.entry:first'),
        newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('textarea').val('');
    controlForm.find('.entry:not(:last) .btn-add')
    .removeClass('btn-add').addClass('btn-remove')
    .removeClass('btn-success').addClass('btn-danger')
    .html('<span class="glyphicon glyphicon-minus">Remove</span>');
  }).on('click', '.btn-remove', function(e)
        {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });

  $("#container").on("change", ".checkbox-type1 > .to_char_id_type1", function () {
    var parent = $(this).parent();
    var newArr = parent.find(".to_char_id_type1:checked").map(function () { return this.value; });
    parent.find(".getID_type1").val(newArr.get().join(","));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" class="reply-box" style="margin: 0 auto;">
  <div class="controls"> 
    <div style="margin-bottom: 20px;" class="entry input-group">
      <textarea class="form-control newreply" name="reply[]" type="text" placeholder="Add Reply"></textarea>
      <span class="input-group-btn">
        <button class="btn btn-success btn-add" type="button">
          <span class="glyphicon glyphicon-plus">Add more reply</span>
        </button>
      </span>
      <br>
      <div class="checkbox-type1">
        One <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="1">         
        Two <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="2">
        Three<input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="3">
        <input type="text" value="" name="getID_type1[]" class="getID_type1">
      </div>
    </div>
  </div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 12:15

You should use DOM traversal methods to get just the checkboxes in the current DIV, and only update the display field in the same DIV.

Also, you need to use .clone(true) to copy the event bindings when you make the clone, or use event delegation as described in Event binding on dynamically created elements?

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone(true)).appendTo(controlForm);

    newEntry.find('textarea').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus">Remove</span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});


$(".checkbox-type1 > .to_char_id_type1").change(function() {
  var newArr = $(this).parent().find(".to_char_id_type1:checked").map(function() {
    return this.value;
  });
  $(this).siblings(".getID_type1").val(newArr.get().join(","));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reply-box" style="margin: 0 auto;">
  <div class="controls">
    <div style="margin-bottom: 20px;" class="entry input-group">
      <textarea class="form-control newreply" name="reply[]" type="text" placeholder="Add Reply"></textarea>
      <span class="input-group-btn">
        <button class="btn btn-success btn-add" type="button">
          <span class="glyphicon glyphicon-plus">Add more reply</span>
      </button>
      </span>
      <br>
      <div class="checkbox-type1">
        One
        <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="1">Two
        <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="2">Three
        <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="3">
        <input type="text" value="" name="getID_type1[]" class="getID_type1">
      </div>
    </div>
  </div>
</div>

Display checked box value with multiple div

2 Answers2