Question

我的代码显示复选框值所有输入字段中添加了更多回复div。

但我希望它显示在我使用的当前div的输入字段中。

这是我的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(","));
});

提前致谢。

Answer 1

你有两个问题：

您需要使用event delegation来处理动态添加项目的更改事件。
在更改事件中，您不能只搜索这些类，而是需要搜索当前元素父级的子级。

这是一个有效的例子：

＆＃13;

$(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(","));
  });
});

＆＃13;

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

＆＃13;

Answer 2

您应该使用DOM遍历方法来获取当前DIV中的复选框，并且只更新同一DIV中的显示字段。

此外，您需要使用.clone(true)在制作克隆时复制事件绑定，或使用Event binding on dynamically created elements?

中所述的事件委派

＆＃13;

$(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(","));
});

＆＃13;

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

＆＃13;

显示带有多个div的复选框值

2 个答案: