Checkbox status jQuery

I have this HTML and I have to check wich one of theese checboxes is checked and get the value of the selected checbox to add it to an array. I've tried different code but I don't know where is the problem

<div class="row ">   
    <div class="col-md-5 col-md-offset-1 col-centered ">
        <input type="checkbox" id="piega1" class="servizioSection2" name="imgSection2"value="PiegaByWellaProfessionals">
        <label class="piega" for="piega1">
            <img src="img/piega1.png" for="piega1" alt="" class="img-responsive immaginePiega ">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY WELLA PROFESSIONALS</h1>
    </div>
    <div class="col-md-5  col-centered piege">
        <input type="checkbox" id="piega2" name="imgSection2" class="piege servizioSection2" value="PiegaBySystemProfessionals">
        <label for="piega2" class="piega ">
            <img src="img/piega2.png" for="piega2" alt="" class="img-responsive immaginePiega">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY SYSTEM PROFESSIONALS</h1>
    </div>
</div>

and this is the Jquery to check the checbox status. I also don't know why if I click on a checbox i get the value of all of them and not just the one I clicked

$(document).on('click', function(event) {
   var serviziSection2 = $('#serviziSection2Def');
   $('input:checkbox').on('click', function(){
     var servizi = [];
     $('.servizioSection2:checkbox').each(function(){
       var checkbox = $(this).val();
             console.log(checkbox)
       if($(checkbox).is(':checked') == true){
           servizi.push(checkbox.next('label').html());
           console.log(servizi)
       }
     });
     serviziSection2.html(servizi.join(', '));
   });
});