<div id="container">
  <div>
    <label><input type="checkbox" name="first_name" value="vasya" />Вася</label>
    <label><input type="checkbox" name="first_name" value="petya" />Петя</label>
    <label><input type="checkbox" name="first_name" value="kolya" />Коля</label>
    <label><input type="checkbox" name="first_name" value="fedya" />Федя</label>
  </div>
  
  <button>Получить значения</button>
</div>
button {
  display: block;
  font: 16px Tahoma;
  margin-top: 24px;
  padding: 12px;
}

#container {
  font: 16px Tahoma;
  width: 80%;
  margin: 60px auto;
}

#container > div {
  display: flex;
}

label {
  display: block;
  margin-right: 24px;
}

input {
  margin-right: 6px;
}
jQuery(document).ready(function($){
  
  $('button').on('click', function(){
    var values = [];
    $('[name="first_name"]:checked').each(function(){
      values.push($(this).val());
    }); 
    
    alert(values.join(', '));
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js