顯示帶有多個div的複選框值

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

你應該使用DOM遍歷方法得到的只是在當前DIV的複選框，只有在同一個DIV更新顯示領域。

此外，你需要使用.clone(true)複製事件綁定時，你的克隆，或使用事件代表團在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>

描述

Answer 2

你有兩個問題：

1. 您需要使用event delegation來處理動態添加的項目更改事件。
2. 在更改事件中，您不能僅搜索這些類，而是需要搜索當前元素父級的子級。

這裏有一個工作示例：

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