jquery - ハイライトの追加と削除

Question

私はアイコンの数があります。私はそれらをクリックすることによってそれらの数を選ぶことができるようにしたい。もう一度クリックすると、チェックマークとイメージを強調するクラスを削除したいと思います。

以下のコードでは、選択した画像を強調表示し、関連するチェックボックスに値を追加することができます。ユーザーが画像をもう一度クリックしたときにそれらを削除するにはどうすればよいですか？

<span id="tripType"> 
    <i class="fa fa-user fa-4x tripType" id="1"></i> 
    <input type="hidden" name="tripTypes[]" value='' id="tripTypeField1"> 

    <i class="fa fa-system fa-4x tripType" id="2"></i> 
    <input type="hidden" name="tripTypes[]" value='' id="tripTypeField2"> 

    <i class="fa fa-phone fa-4x tripType" id="3"></i> 
    <input type="hidden" name="tripTypes[]" value='' id="tripTypeField3"> 
</span> 

JS：

<script> 
    $(".tripType").click (function() { 
     var obj = this; 
     $(obj).addClass('border-highlight'); 

     chosenID = $(obj).attr("id"); 

     $("#tripTypeField" + chosenID).val(chosenID); 
    }); 

</script> 

Answer 1

だけ選択された一つにそれを追加し、最初のクラスを削除。

$(".tripType").click (function() {   
    $(".border-highlight").removeClass('border-highlight'); 
    $(this).addClass('border-highlight'); 
    chosenID = $(this).attr("id"); 
    $("#tripTypeField" + chosenID).val(chosenID); 
});