新しく選択されたチェックボックスのみを前のものに追加する

こんにちは、私はテーブルがあり、ユーザーが入力したものを追加します。新しいtrを追加すると新しいチェックボックスが追加されます。チェックボックスを押して、それが表示される結果を表示するが、私は別のチェックボックスを押すと、前のチェックボックスと新しいチェックボックスが表示されますどのように私はマークしているチェックボックスを追加できますか？新しく選択されたチェックボックスのみを前のものに追加する

更新の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"); 
}) 

});

HTML：

<body> 
<div class="row"> 
<div class="col-md-2"></div> 
<div class="col-md-8"> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Insert your to do..."> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Add!</button> 
     </span> 
    </div><!-- /input-group --> 
    <button class="btn-info">Show Completed</button> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">To do List</h3> 
     </div> 
     <div class="panel-body"> 
      <table class="table table-striped list"> 

      </table>  
     </div> 
    </div> 

    <div class="panel panel-default completed hide"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Completed</h3> 
     </div> 
     <div class="panel-body"> 
      <table class="table table-striped showCompleted"> 
      </table>  
     </div> 
    </div> 
</div><!-- /.col-lg-6 --> 
<div class="col-md-2"></div> 
</div> 
</body>

出典

2017-01-06 Venamus

かなり確実ではないあなたが何を意味するか（おそらくスクリーンショットが役立つだろう、と同様にあなたのHTMLマークアップを示します）。 'if（$（"。check "）。prop（' checked '））{'はすべての要素を" checked "クラスとマッチさせますが、_first_のチェックされたプロパティのみを返します。 one - http://api.jquery.com/prop/を参照してください。つまり、必ずしも正しいチェックボックスをテストしているわけではありません。私はあなたがおそらくclickイベントを引き起こしたチェックボックスを対象にしたいと思うと思う： 'if（$（this）.prop（ 'checked'））{' – ADyson

ええ、（$ this.prop（ 'checked'））{'しかし、もし私がマークされたチェックボックスを追加すると、マークされた最新のものだけが追加されるのではなく、新しいものが追加されます1つ前のものに加えて – Venamus

あなたのHTMLのいくつかを共有してあなたを助けることができます –

あなたは、再び値がに入力されるたびに、あなたの "クリック" イベントを宣言しているため、問題がありますテキストボックス。したがって、2つの値を入力すると、2つのクリックイベントが処理され、それぞれが異なる値のtextval（イベントが宣言されたときのtextvalに応じて）が発生します。したがって、2つのチェックボックスを作成し、そのうちの1つをクリックすると（どちらに関係なく）、イベントを2回実行して両方の値を出力します。 3つのチェックボックスを追加すると同じことが起こり、イベントは3回実行されます。

解決策は、委任されたイベント構文を正しく使用したため、後で作成されたすべてのチェックボックスのイベントを処理するため、clickイベントを一度宣言することです。最後に更新されたテキストボックスの値のみを表すので、それを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"); 
    }); 
});

出典

2017-01-06 16:56:41 ADyson

美しくてありがとう疑いがなくなりました。 – Venamus

@Venamusそれは素晴らしい、喜んで助けてください。答えがあなたのために働くなら、upvoteと/またはそれを受け入れることを忘れないでください - ありがとう:-) – ADyson

新しく選択されたチェックボックスのみを前のものに追加する

答えて

関連する問題