checkbox選中新增與不選中刪除的操作
阿新 • • 發佈：2018-12-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="checkbox" data-id="1"> <span>賬上</span> </div> <div> <input type="checkbox" data-id="2"> <span>賬上1</span> </div> <div> <input type="checkbox" data-id="3"> <span>賬上2</span> </div> <div class=""> <input type="checkbox" data-id="4"> <span>賬上3</span> </div> <div class="mihao"> </div> </body> <script src="../js/jquery-1.11.1.js"></script> <script> var str=''; for(let i=0;i<$('input').length;i++){ $('input').eq(i).click(function(){ if($(this).prop("checked")==true){ var nane=$(this).siblings('span').html(); str=`<b data-id="${$(this).attr('data-id')}">${$(this).siblings('span').html()}</b>` $('.mihao').append(str); }else { var id=$(this).attr('data-id'); for(let j=0;j<$('.mihao b').length;j++){ //便利所有的b標籤 if(id==$('.mihao b').eq(j).attr('data-id')){ //判斷兩個id是否相同，如果相同刪除 console.log($('.mihao b').eq(j).html()); $('.mihao b').eq(j).remove() } } } }) } </script> </html>