することができますhtmlの複数の要素を選択して選択を解除し、選択されたものを追跡します

Question

私のHTMLテンプレートは、バックエンドに応じて何度も追加されます。だから、私はトピックを選択し、選択された要素のIDを送信したい。どうやってするの？ 今すぐ選択することができますし、その後も選択を解除することはできません。 ヘルプ！

選択するための私のjQueryのコードは：

$(document.body).click(function(evt){ 
    var clicked = evt.target; 
    var currentID = clicked.id || "No ID!"; 

    document.getElementById(currentID).style.backgroundColor = "#00afbc"; 
    //$(clicked).html(currentID); 
}) 

私のHTMLコード：

<div class="container-fluid" id="container-<%=no%>"> 

    <div id="circle" style="background:<%= colorCode %>;" class="col-xs-3"> 
     <div class="text" style="color:<%= textColor %>;"> 
      <%=p ercent %> 
     </div> 
     <div class="percent" style="color:<%= textColor %>;">%</div> 
    </div> 

    <div id="sideText"> 
     <div class="checkbox col-xs-9 everything-checkbox"> 
      <!--input type="checkbox" class="toggle" /--> 
      <div id="currentID"> 
       <%=currentID %> 
      </div> 

      <div id="question"> 
       <%=t otalQues %> Questions Attempts 
      </div> 

     </div> 
    </div> 

</div> 
<hr style="width: 100%; color: #d9d9d9; height: 1px; background-color:#d9d9d9; margin-top:0px;margin-bottom:0px;" /> 

Answer 1

あなただけの追加と削除クラスを選択した項目を追跡するために、その後、ちょうどすべての選択を取得することができますIDを持つアイテム

$(document).ready(function() { 
    $(document.body).click(function (evt) { 
     var clicked = evt.target; 
     if (!$(clicked).hasClass('selected')) { 
      $(clicked).addClass('selected'); 
      $(clicked).css('background-color', '#00afbc'); 
     } else { 
      $(clicked).removeClass('selected'); 
      $(clicked).css('background-color', ''); 
     } 
    }); 
}); 

function getSelected() { 
    var ids = []; 
    $('.selected').each(function() { 
     var id = $(this).attr('id'); 
     if (id) { 
      ids.push($(this).attr('id')); 
     } 
    }); 
    return ids; 
}