Javascript 仅附加新选中的复选框，而不是先前的复选框

您好，我的问题是我有一个表，我添加了用户正在键入的内容，当添加了一个新的tr时，会添加一个新的复选框。当我标记复选框并按show result时，它会出现，但当我按另一个复选框时，会出现以前的复选框和新的复选框。我如何仅附加我正在标记的复选框？ 这是我的密码：

更新Jquery:

$(document).ready(function(){

$(".btn-default").on("click",function(){
    var textval = $('.form-control').val();
    $('.list').append("<tr class='tabletr'><td>"+"<input type='checkbox' class='check'/> " + textval + "<br />"+"</tr></td>");


    $('body').on("click", ".check" , function() {
        var $this = $(this);
        var textcopy = textval;
        if( $this.prop('checked')){
            $(".showCompleted").append("<tr><td>"+textcopy+"</td></tr>");
            $(this).closest('.tabletr').remove();
            textval="";
        } 


    });

});

$(".btn-info").on("click",function(){
    $(".completed").removeClass("hide");
})

});

$（文档）.ready（函数（）{
$（.btn默认值”）。在（“单击”，函数（）上{
var textval=$（'.form control'）.val（）；
$（'.list'）.append（“+”+textval+”
“+”）；
$（'body'）。在（“单击“，”.check“，函数（）上）{
var$this=$（this）；
var textcopy=textval；
如果（$this.prop（'checked'））{
$（“.showCompleted”）.append（“+textcopy+”）；
$（this）.closest（'.tabletr'）.remove（）；
textval=”“；
} 
});
});
$（“.btn info”）。在（“单击”，函数（）{
$（“.completed”）.removeClass（“隐藏”）；
})
});

HTML:

添加
演出结束
待办事项清单
完整的

问题在于，每次在文本框中输入值时，您都会再次声明“单击”事件。因此，如果输入2个值，则将处理2个单击事件，每个事件的值不同，分别为

textval

（取决于声明事件时的textval）。因此，如果您创建两个复选框，然后单击其中一个复选框（不管是哪个），它将运行两次事件并打印两个值。如果添加3个复选框，同样的情况也会发生，那么事件将运行3次。如果你加100也一样

解决方案是只声明单击事件一次-因为您已正确使用委派事件语法，它将处理随后创建的所有复选框上的事件。您还需要将其与

textval

断开连接，因为这只表示上次更新时文本框的值。相反，我使用了

span

环绕您需要的文本，并使用一个类来识别它。最后，我做了一个小改动，只调用一次

$（this）

，以标识当前复选框，并将其分配给一个变量-重复调用jQuery构造函数（相对）比较昂贵，而且浪费资源

解决办法如下：

$(document).ready(function() {
  $(".btn-default").on("click",function(){
    var textval = $('.form-control').val();
    $('.list').append("<tr class='tabletr'><td>"+"<input type='checkbox' class='check'/><span class='textval'>" + textval + "</span><br />"+"</tr></td>");
  });

  $('body').on("click", ".check" , function() {
    var cbox = $(this);
    var textcopy = cbox.next('.textval').text();

    if(cbox.prop('checked') == true){
        $(".showCompleted").append("<tr><td>"+textcopy+"</td></tr>");
        cbox.closest('.tabletr').remove();
        textval="";
    } 
  });

  $(".btn-info").on("click",function(){
    $(".completed").removeClass("hide");
  });
});

$（文档）.ready（函数（）{
$（.btn默认值”）。在（“单击”，函数（）上{
var textval=$（'.form control'）.val（）；
$（'.list'）.append（“+”+textval+”
“+”）；
});
$（'body'）。在（“单击“，”.check“，函数（）上）{
var cbox=$（此值）；
var textcopy=cbox.next（'.textval'）.text（）；
if（cbox.prop（'checked'）==true）{
$（“.showCompleted”）.append（“+textcopy+”）；
cbox.closest（'.tabletr'）.remove（）；
textval=”“；
} 
});
$（“.btn info”）。在（“单击”，函数（）{
$（“.completed”）.removeClass（“隐藏”）；
});
});

不太清楚您的意思（也许屏幕截图会有所帮助，并显示您的HTML标记）。但是有两点值得注意：

if（$（.check”）.prop（'checked'）{

将所有元素与“checked”匹配类，但将只返回第一个属性的checked属性-请参阅文档中的prop:。这意味着您并不总是测试正确的复选框。我想您可能希望针对导致单击事件的复选框：

if（$（this）.prop（'checked'）{

是的，我已经更改了

if（$（.check”）.prop（'checked'）））{

到

如果（$this.prop（'checked'））{

但是，当我附加标记的复选框时，它不会只附加标记的最新复选框，而是附加新复选框和旧复选框。共享一些HTML以帮助您。帖子已经用JQ和Html@Venamus太好了，很乐意帮忙。如果答案对你有效，请记得投票和/或接受它-第anks:-）

$(document).ready(function() {
  $(".btn-default").on("click",function(){
    var textval = $('.form-control').val();
    $('.list').append("<tr class='tabletr'><td>"+"<input type='checkbox' class='check'/><span class='textval'>" + textval + "</span><br />"+"</tr></td>");
  });

  $('body').on("click", ".check" , function() {
    var cbox = $(this);
    var textcopy = cbox.next('.textval').text();

    if(cbox.prop('checked') == true){
        $(".showCompleted").append("<tr><td>"+textcopy+"</td></tr>");
        cbox.closest('.tabletr').remove();
        textval="";
    } 
  });

  $(".btn-info").on("click",function(){
    $(".completed").removeClass("hide");
  });
});